Use Badge Count as a label to display numeric values, such as version numbers and collection counts in tabs.
Usage
When to use
To display version numbers (e.g., “v1.2.0”), collection counts in tabs, or similar numeric 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 color options for each type: neutral and neutral-dark-mode.
Size
There are three sizes: small, medium, and large.
Related
How to use this component
The default invocation requires a text argument and renders a medium neutral filled Badge Count.
<Hds::BadgeCount @text="3" />
Type
A different type of Badge Count can be invoked using the @type argument.
<Hds::BadgeCount @text="3" @type="inverted" />
<Hds::BadgeCount @text="3" @type="outlined" />
Size
A different size of Badge Count can be invoked using the @size argument.
<Hds::BadgeCount @text="3" @size="small" />
<Hds::BadgeCount @text="3" @size="large" />
Color
A different color of Badge Count 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
- Text value that renders in the Badge Count.
- 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, let us know by submitting an issue.