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.

<div>
        <Button>
            Explore
            <Tag compact badge color="inverse">45</Tag>
        </Button>
        <br/><br/>
        <Button primary>
            Download
            <Tag compact badge >127</Tag>
        </Button>
        <br/><br/>
        <Button negative>
            Needs Work
            <Tag compact badge>7</Tag>
        </Button>
    </div>

<div>
        <Button>
            Explore
            <Tag compact badge color="inverse">45</Tag>
        </Button>
        <br/><br/>
        <Button primary>
            Download
            <Tag compact badge >127</Tag>
        </Button>
        <br/><br/>
        <Button negative>
            Needs Work
            <Tag compact badge>7</Tag>
        </Button>
    </div>

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