# Count

A static label that indicates the quantity of items.

Tabs: [Guidelines](/components/web/count/count.guidelines.md) · [Code](/components/web/count/count.code.md)

## 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.

```tsx
<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.

```tsx
<Count skeleton>100</Count>
```

## Best practices

**Do:** 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.

## Related components

- [Badge](/components/web/badge/badge.guidelines): A static label that highlights an item's status.
- [Tag](/components/web/tag/tag.guidelines): A static label that highlights an item's category or attribute.