Badge
Badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text.
Text-only sm-badge
To obtain this result, use span tag with badge-content,
position-relative and sm-badge class name.
Text with a badge 4
Text-only lg-badge
To obtain this result, use span tag with badge-content,
position-relative and lg-badge class name.
Text with large badge 4
Action Badge
To obtain this result, use a tag with badge-btn,
position-relative class name and span tag with badge-content,
position-relative, sm-badge class name.
Button with a badge on the left Action 8
Toggle Badge
To obtain this result, use a tag with badge-btn,
position-relative class name with badgeBtn id and span tag
with
badge-content,
position-relative, sm-badge class name.
Button toggles badge visiblity Toggle 7
Icon Badge
To obtain this result, use i tag for icon and span tag
with
badge-content,
position-relative and sm-badge class name.
Icon with a badge 20
Avatar Badge
To obtain this result, use img tag with badge-avatar
class name and
span tag with
badge-content,
position-relative and sm-badge class name.
Avatar with a badge
20