<TagGroup>
        <Tag badge onClose={() => {}}>45</Tag>
        <Tag badge color="inverse">33</Tag>
        <Tag badge>99+</Tag>
    </TagGroup>

Compact

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

    <TagGroup>
        <Tag compact badge onClose={() => {}}>45</Tag>
        <Tag compact badge color="inverse">33</Tag>
        <Tag compact badge>99+</Tag>
    </TagGroup>

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>

Variants

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

    <Tag compact badge color="inverse">3</Tag>

Declining value

    <TagGroup>
        <Tag compact badge color="critical" subtle>44</Tag>
        <Tag compact badge color="critical" subtle>−137</Tag>
    </TagGroup>

Increasing value

    <TagGroup>
        <Tag compact badge color="success" subtle>44</Tag>
        <Tag compact badge color="success" subtle>+7</Tag>
    </TagGroup>

Important callout

Use when there is an important callout on the page.

    <Tag compact badge color="critical">5</Tag>

Important positive value

Use for important increments or positive monetary values.

    <Tag compact badge color="success">$584.29</Tag>

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