The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Badge Count

A numeric label used to display things like version number or collection enumerations.

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.

3
3
3

Color

There are two color options for each type: neutral and neutral-dark-mode.

3
3

Size

There are three sizes: small, medium, and large.

3
3
3

How to use this component

The default invocation requires a text argument and renders a medium neutral filled Badge Count.

3
<Hds::BadgeCount @text="3" />

Type

A different type of Badge Count can be invoked using the @type argument.

3
<Hds::BadgeCount @text="3" @type="inverted" />
3
<Hds::BadgeCount @text="3" @type="outlined" />

Size

A different size of Badge Count can be invoked using the @size argument.

3
<Hds::BadgeCount @text="3" @size="small" />
3
<Hds::BadgeCount @text="3" @size="large" />

Color

A different color of Badge Count can be invoked using the @color argument.

3
<Hds::BadgeCount @text="3" @color="neutral-dark-mode" />

Component API

type enum
  • filled (default)
  • inverted
  • outlined
size enum
  • small
  • medium (default)
  • large
color enum
  • neutral (default)
  • neutral-dark-mode
text string
Text value that renders in the Badge Count.
…attributes
This component supports use of ...attributes.

Conformance rating

Conformant

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.


Related