Design System

Badge

Tones

NeutralInfoPositiveCautionCriticalPromote

1
<Inline space="small">
2
    <Badge tone="neutral">Neutral</Badge>
3
    <Badge tone="info">Info</Badge>
4
    <Badge tone="positive">Positive</Badge>
5
    <Badge tone="caution">Caution</Badge>
6
    <Badge tone="critical">Critical</Badge>
7
    <Badge tone="promote">Promote</Badge>
8
</Inline>

Without vertical bleed

Avoid

Without "bleedY", the badge's vertical padding adds to the line height, causing uneven spacing between lines.

A line of text for comparison.

This line contains New and has uneven spacing.

A line of text for comparison.

1
<Stack space="x-small">
2
    <Text
3
        element="p"
4
        size="small">
5
        A line of text for comparison.
6
    </Text>
7
    <Text
8
        element="p"
9
        size="small">
10
        This line contains <Badge tone="info">New</Badge> and has uneven spacing.
11
    </Text>
12
    <Text
13
        element="p"
14
        size="small">
15
        A line of text for comparison.
16
    </Text>
17
</Stack>

With vertical bleed

The "bleedY" prop cancels the badge's vertical padding contribution to line height, keeping surrounding line spacing consistent.

A line of text for comparison.

This line contains Fixed and spacing is unchanged.

A line of text for comparison.

1
<Stack space="x-small">
2
    <Text
3
        element="p"
4
        size="small">
5
        A line of text for comparison.
6
    </Text>
7
    <Text
8
        element="p"
9
        size="small">
10
        This line contains{' '}
11
        <Badge
12
            tone="positive"
13
            bleedY>
14
            Fixed
15
        </Badge>{' '}
16
        and spacing is unchanged.
17
    </Text>
18
    <Text
19
        element="p"
20
        size="small">
21
        A line of text for comparison.
22
    </Text>
23
</Stack>