You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Content

Badge

Compact

Compact badges are used in areas with small screen space and dense content.

Badges in Buttons

Badges can also be found inside buttons.

Variants

Inverse. Used when on a light gray background, such as a button.

Declining value

Increasing value

Important callout

Use when there is an important callout on the page.

Important positive value

Use for important increments or positive monetary values.


Best Practices

  • Badges should be quick and easy to identify.
  • Badges should be primarily numerical in nature. Use tags in other scenarios.

Importing

Badges are technically apart of the Tag component, using the badge property.

import { Tag, TagGroup } from '@servicetitan/design-system';