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
-
...attributesspreading is supported on this component.
Showcase
Content
This is a paragraph:
Size
Type
Color:
Neutral
Neutral-dark-mode
When used as recommended, there should not be any accessibility issues with this component.