Badges
Small and adaptive badges for adding context to just about any content.
Contents
Example
Badges scale to match the size of the immediate parent element by using relative font sizing and em
units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges can be used as part of links or buttons to provide a counter.
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
Contextual Variations
Use our background and text color utility classes to quckly change the appearance of a badge.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Outline Badges
Since badges have a transparent border by default, it is easy to create outline badges with the addition of border color utility classes, in combination with the background and text color utilities.
Pill Badges
Use the .radius-pill
utility class to make badges more rounded.
Close Icon
Create “dismissable” badges by adding the .close
icon within a badge. Note that <button>
and <a>
elements are not supported within another <a>
.
JavaScript Integration
Currently, no specific JavaScript is included with Figuration to do the dismissing for you, so it may be more beneficial to write your own to implement any desired behaviors.
However, you can use the Alert widget with a target
option as a quick implementation.
Badge Group
Group badges together using .badge-group
.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for the badge component.
Name | Type | Default | Description |
---|---|---|---|
$enable-badge |
boolean | true |
Enable the generation of the badge component classes.
Smaller segements of the badge component classes can be disabled with the following $enable-* variables.
|
$enable-badge-close |
boolean | true |
Enable the generation of the badge close button rule. |
$enable-badge-group |
boolean | true |
Enable the generation of the badge group variant. |
$badge-bg |
string | $uibase-500 |
Badge default background color. |
$badge-color |
string | $white |
Badge default text color. |
$badge-font-family |
string | null |
Badge font family. |
$badge-font-size |
string | .75em |
Badge font size. |
$badge-font-weight |
string | $font-weight-bold |
Badge font weight. |
$badge-line-height |
string | 1 |
Badge line height. |
$badge-padding-y |
string | .25em |
Badge vertical padding. |
$badge-padding-x |
string | .4375em |
Badge horizontal padding. |
$badge-border-width |
string | $border-width |
Badge border width. |
$badge-border-radius |
string | .25em |
Badge border radius. |
$badge-close-padding-x |
string | .375em |
Badge close button horizontal padding. |
$badge-close-font-size |
string | 1.25em |
Badge close button font size. |
Mixins
No mixins available.