Badges
Documentation and examples for badges, our small count and labeling component.
Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<div class="border p-2">
<h1>Example heading
<Badge variant="secondary">New</Badge>
</h1>
<h2>Example heading
<Badge variant="secondary">New</Badge>
</h2>
<h3>Example heading
<Badge variant="secondary">New</Badge>
</h3>
<h4>Example heading
<Badge variant="secondary">New</Badge>
</h4>
<h5>Example heading
<Badge variant="secondary">New</Badge>
</h5>
<h6>Example heading
<Badge variant="secondary">New</Badge>
</h6>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Buttons
Badges can be used as part of links or buttons to provide a counter.
<Button variant="primary">
Notifications
<Badge variant="secondary">4</Badge>
</Button>
1
2
3
4
5
2
3
4
5
Positioned
Badges can be positioned in different corners depending on its parent. Use values top-right, top-left, bottom-right or bottom-left for position property.
<Row>
<Col>
<Button variant="primary" class="position-relative">
Inbox
<Badge variant="danger" pill position="top-right">
99+
<span class="visually-hidden">unread messages</span>
</Badge>
</Button>
</Col>
<Col>
<Button variant="primary" class="position-relative">
Inbox
<Badge variant="danger" pill position="top-left">
99+
<span class="visually-hidden">unread messages</span>
</Badge>
</Button>
</Col>
</Row>
<Row class="mt-5">
<Col>
<Button variant="primary" class="position-relative">
Inbox
<Badge variant="danger" pill position="bottom-right">
99+
<span class="visually-hidden">unread messages</span>
</Badge>
</Button>
</Col>
<Col>
<Button variant="primary" class="position-relative">
Inbox
<Badge variant="danger" pill position="bottom-left">
99+
<span class="visually-hidden">unread messages</span>
</Badge>
</Button>
</Col>
</Row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Background colors
User color variants primary ,secondary,success,danger,warning,info,light,dark for variant property to achieve different backgrounds.
<Badge :variant="v" class="m-2"
v-for="v in ['primary', 'secondary', 'success', 'danger', 'warning' , 'info' , 'light' , 'dark']">
{{v}}
</Badge>
1
2
3
4
5
2
3
4
5
Pill badges
Use prop pill
<Badge :variant="v" pill class="m-2"
v-for="v in ['primary', 'secondary', 'success', 'danger', 'warning' , 'info' , 'light' , 'dark']">
{{v}}
</Badge>
1
2
3
4
5
2
3
4
5