Badges - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Badges#

Badges are often used as unread number indicators.

Notifications
Notifications
Notifications
Notifications

Add the `badge` class to non self closing elements. And add the `data-badge` attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no `data-badge` or the attribute is not specified, the badge will appear as a dot.

Badges support `button` and `avatars` elements as well.

    <span class="badge">
      Notifications
    </span>

    <span class="badge" data-badge="8">
      Notifications
    </span>

    <button class="btn badge" data-badge="8">
      Button
    </button>

    <figure class="avatar badge" data-badge="8" data-initial="YZ">
      <img src="img/avatar-3.png" alt="YZ">
    </figure>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.