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


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

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

Badges in Buttons

Badges can also be found inside buttons.

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


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

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

Declining value

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

Increasing value

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

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.


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

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