Alternatives

Tag — Use tags to label, categorise or classify items using keywords

Badge

Use badges to highlight an item's status for quick recognition. Badges should contain short easy-to-scan text. Use sentence case for the badge's label.

Edit in Playroom

<Badge label="To do" />

tone

Use the tone property to indicate the intent of the badge.

Edit in Playroom

<Badge tone="primary" label="Primary" />

weight

Use "subtle" weight badges by default, and in instances where they may dominate the screen, such as tables. Reserve "bold" badges for occasions where you must grab the user's attention.

Edit in Playroom

<Badge weight="bold" tone="primary" label="Primary" />

Tones and weights

Edit in Playroom

<Stack gap="xxlarge" width={600}>
  <Columns gap="large">
    <div></div>
    <Text size="xsmall" weight="bold" color="muted">
      Subtle
    </Text>
    <Text size="xsmall" weight="bold" color="muted">
      Bold
    </Text>
  </Columns>
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Primary
      </Text>
      <Badge weight="subtle" tone="primary" label="Primary subtle" />
      <Badge weight="bold" tone="primary" label="Primary bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Primary inverse
      </Text>
      <div>N/A</div>
      <Badge
        weight="bold"
        tone="primary-inverse"
        label="Primary inverse subtle"
      />
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Secondary
      </Text>
      <div>N/A</div>
      <Badge weight="bold" tone="secondary" label="Secondary bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Secondary inverse
      </Text>
      <div>N/A</div>
      <Badge
        weight="bold"
        tone="secondary-inverse"
        label="Secondary inverse subtle"
      />
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Neutral
      </Text>
      <Badge weight="subtle" tone="neutral" label="Neutral subtle" />
      <Badge weight="bold" tone="neutral" label="Neutral bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Neutral inverse
      </Text>
      <div>N/A</div>
      <Badge
        weight="bold"
        tone="neutral-inverse"
        label="Neutral inverse subtle"
      />
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Critical
      </Text>
      <Badge weight="subtle" tone="critical" label="Critical subtle" />
      <Badge weight="bold" tone="critical" label="Critical bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Critical inverse
      </Text>
      <div>N/A</div>
      <Badge
        weight="bold"
        tone="critical-inverse"
        label="Critical inverse subtle"
      />
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Positive
      </Text>
      <Badge weight="subtle" tone="positive" label="Positive subtle" />
      <Badge weight="bold" tone="positive" label="Positive bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Positive inverse
      </Text>
      <div>N/A</div>
      <div>N/A</div>
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Cautious
      </Text>
      <Badge weight="subtle" tone="cautious" label="Cautious subtle" />
      <Badge weight="bold" tone="cautious" label="Cautious bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Cautious inverse
      </Text>
      <div>N/A</div>
      <div>N/A</div>
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Informative
      </Text>
      <Badge weight="subtle" tone="informative" label="Informative subtle" />
      <Badge weight="bold" tone="informative" label="Informative bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Informative inverse
      </Text>
      <div>N/A</div>
      <div>N/A</div>
    </Columns>
  </Stack>
  <Divider />
  <Stack gap="small">
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Disabled
      </Text>
      <Badge weight="subtle" tone="disabled" label="Disabled subtle" />
      <Badge weight="bold" tone="disabled" label="Disabled bold" />
    </Columns>
    <Columns gap="large" alignY="center">
      <Text size="xsmall" weight="bold" color="muted">
        Disabled inverse
      </Text>
      <div>N/A</div>
      <div>N/A</div>
    </Columns>
  </Stack>
</Stack>

NotificationBadge

A notification badge is a visual indicator for numeric values such as tallies and scores.

Edit in Playroom

<NotificationBadge value={123} />

tone

Use the tone property to indicate the intent behind a given value.

Edit in Playroom

<Inline gap="small">
  <NotificationBadge tone="primary" value={12} />
  <NotificationBadge tone="secondary" value={12} />
  <NotificationBadge tone="neutral" value={12} />
  <NotificationBadge tone="informative" value={23} />
  <NotificationBadge tone="critical" value={34} />
  <NotificationBadge tone="positive" value={45} />
  <NotificationBadge tone="cautious" value={34} />
</Inline>

max

Use the max property where the count is expected to exceed a reasonable number, and the exact count is not particularly valuable to the user.

Edit in Playroom

<NotificationBadge tone="informative" max={99} value={123} />

IndicatorDot

A small decorative indicator used to call attention to an item.

Edit in Playroom

<Inline gap="large">
  <IndicatorDot tone="primary" />
  <IndicatorDot tone="neutral" />
  <IndicatorDot tone="critical" />
  <IndicatorDot tone="informative" />
  <IndicatorDot tone="positive" />
  <IndicatorDot tone="cautious" />
  <IndicatorDot tone="disabled" />
</Inline>

label

When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users.

Edit in Playroom

<button type="button">
  <Inline gap="small" alignY="center">
    <Text>Action item</Text>
    <IndicatorDot tone="critical" aria-label="Contains issues" />
  </Inline>
</button>