Badge
Highlight new or unread items. Limited usage is recommended, mainly for displaying numeric values in combination with other data to provide context. Do not use in place of labels, or any other similar element.
Example Usage
{{
html.badge({
'label': '123'
})
}}
Options
| Option | Type | Description |
|---|---|---|
| class | string | CSS classes, space separated |
| id | string | A unique identifier, if required |
| label | string | The value to display, usually an integer |
| data-* | string | Data attributes, eg: 'data-foo': 'bar' |
Variations
Badges accept the normal state variations through the class option.
{{
html.badge({
'label': '2',
'class': 'badge--primary'
})
}}
See the Pen docs - html - badges by Pulsar (@pulsar) on CodePen.
Badged buttons
Badges within buttons will inherit the parent button styling without the need to define a specific badge style, which is nice.
{{
html.button({
'label': 'Primary ' ~ html.badge({ 'value': '2' }),
'class': 'btn--primary'
})
}}
See the Pen docs - html - badges in buttons by Pulsar (@pulsar) on CodePen.