Components

Count

A static label that indicates the quantity of items.

Features

Appears disabled when part of a disabled component.

When to use

Use the Count component to indicate the quantity of items, instead of using a Tag or a Badge.

Examples

Within a disabled component

The component will automatically appear disabled when used inside a component with the disabled HTML attribute.

Show code

<Checkbox name="checkbox" disabled>
    <Inline as="span" space={8} alignItems="center">
        Activated Cards
        <Count>4</Count>
    </Inline>
</Checkbox>

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Show code

<Count skeleton>100</Count>

Best practices

Use the Count component to indicate the quantity of items.

Don't

Use the Count component for text labels. Use a Tag or Badge instead.

Accessibility

Use a Count in conjunction with a single item or label, to avoid ambiguity around which item is being quantified.

Badge: A static label that highlights an item's status.
Tag: A static label that highlights an item's category or attribute.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page