GitHub icon

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';