Documentation and examples for badges, our small count and labeling component.
Badges scale to match the size of the immediate parent element by using relative font sizing and em
units.
<template>
<h1>
Example heading
<Badge background-color="secondary">
New
</Badge>
</h1>
<h2>
Example heading
<Badge background-color="secondary">
New
</Badge>
</h2>
<h3>
Example heading
<Badge background-color="secondary">
New
</Badge>
</h3>
<h4>
Example heading
<Badge background-color="secondary">
New
</Badge>
</h4>
<h5>
Example heading
<Badge background-color="secondary">
New
</Badge>
</h5>
<h6>
Example heading
<Badge background-color="secondary">
New
</Badge>
</h6>
</template>
Badges can be used as part of links or buttons to provide a counter.
<template>
<b-button button="primary">
Notifications
<Badge background-color="secondary">
4
</Badge>
</b-button>
</template>
Use utilities to modify a Badge
and position it in the corner of a link or button.
<template>
<b-button
button="primary"
position="relative"
>
Inbox
<Badge
position="absolute"
top="0"
start="100"
translate="middle"
rounded="pill"
background-color="danger"
label="unread messages"
>
99+
</Badge>
</b-button>
</template>
You can also modify the Badge
component with a few more utilities without a count for a more generic indicator.
<template>
<b-button
button="primary"
position="relative"
>
Profile
<Badge
position="absolute"
top="0"
start="100"
translate="middle"
background-color="danger"
label="New alerts"
border-color="light"
rounded="circle"
padding="2"
/>
</b-button>
</template>
Use our background utility classes to quickly change the appearance of a badge.
Please note that when using Bootstrap's default background-color="light"
, you'll likely need a text color utility like text-color="dark"
for proper styling.
This is because background utilities do not set anything but background-color
.
<template>
<Badge background-color="primary">
Primary
</Badge>
<Badge background-color="secondary">
Secondary
</Badge>
<Badge background-color="success">
Success
</Badge>
<Badge background-color="danger">
Danger
</Badge>
<Badge background-color="warning">
Warning
</Badge>
<Badge background-color="info">
Info
</Badge>
<Badge background-color="light">
Light
</Badge>
<Badge background-color="dark">
Dark
</Badge>
</template>
Use the rounded="pill"
utility, class to make badges more rounded with a larger border-radius
.
<template>
<Badge
background-color="primary"
rounded="pill"
>
Primary
</Badge>
<Badge
background-color="secondary"
rounded="pill"
>
Secondary
</Badge>
<Badge
background-color="success"
rounded="pill"
>
Success
</Badge>
<Badge
background-color="danger"
rounded="pill"
>
Danger
</Badge>
<Badge
background-color="warning"
rounded="pill"
>
Warning
</Badge>
<Badge
background-color="info"
rounded="pill"
>
Info
</Badge>
<Badge
background-color="light"
rounded="pill"
>
Light
</Badge>
<Badge
background-color="dark"
rounded="pill"
>
Dark
</Badge>
</template>