Badge
For displaying notification counts
Demo
API
Tag
| Name | Description |
|---|---|
<s-badge>
|
Custom HTML tag, no content |
Attributes
| Name | Value | Required | Description |
|---|---|---|---|
count |
Number |
|
Sets the notification count. If zero or empty, the Badge will not be displayed. |
Properties
| Name | Value | Required | Description |
|---|---|---|---|
count |
Number |
|
Sets the notification count. If zero or empty, the Badge will not be displayed. |
Demo
API
Tag
| Name |
<SBadge>
|
Props
| Name | Value | Required | Description |
|---|---|---|---|
count |
Number |
|
Sets the notification count. If zero or empty, the Badge will not be displayed. |
Skylab React links
Guidelines
Accessibility
Give the Badge an alt attribute that indicates what the badge
signifies (e.g. "4 unread messages").
Context
Badges display a numerical count of another component. They must always be placed in close proximity to the component of which the numerical count is a representation of. They never stand alone, as a numerical value without context isn’t useful. Varying levels of specificity via truncation are available for use. The truncation thresholds for badges are shown below.
For counts only
Although Badge will render any non-zero, non-empty string, it is only intended to show a number. If you have a short
message or keyword use case try Tag. Please note that the component does not display
when count is either empty or set to the string "0".
Localization
Badge does not localize its count. You must localize the number first, then pass it to Badge.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com