Use BadgeCount as a numeric label to display version numbers, collection counts in tabs, and similar information. For non-numeric information, use Badge.
Usage
When to use
- To display version numbers (ie. “v1.2.0”), collection counts in tabs, and similar information.
When not to use
- To display non-numeric information, consider Badge.
Type
There are three types of BadgeCounts: filled, inverted, and outlined.
Color
There are two colors: neutral, and neutral-dark-mode.
Size
There are three sizes: small, medium, and large.
Related
How to use this component
Basic
The most basic invocation requires the text argument to be passed. By default, a filled, medium size, neutral color badgeCount is generated.
<Hds::BadgeCount @text="3" />
Type
A different type of badgeCount can be invoked using the type argument.
<Hds::BadgeCount @text="3" @type="inverted" />
Size
A different size of badgeCount can be invoked using the size argument.
<Hds::BadgeCount @text="3" @size="large" />
Color
A different color of badgeCount can be invoked using the color argument.
<Hds::BadgeCount @text="3" @color="neutral-dark-mode" />
Component API
- Name
-
size - Type
-
enum - Values
-
- small
- medium (default)
- large
- Name
-
type - Type
-
enum - Values
-
- filled (default)
- inverted
- outlined
- Name
-
color - Type
-
enum - Values
-
- neutral (default)
- neutral-dark-mode
- Name
-
text - Type
-
string - Description
- The text value that should go in the badge counter.
- Name
-
…attributes - Description
-
This component supports use of
...attributes.
Conformance rating
When used as recommended, there should not be any accessibility issues with this component.
Support
If any accessibility issues have been found within this component, please let us know by submitting an issue.