Badge
Small labels to highlight status, counts, or categories on elements.
Installation
Add the component to your project using the following command:
Usage
Import
Import the component and its related parts.
Structure
The expected structure and composition of the component.
Props
Each component part, its responsibility, and the props it exposes.
<Badge>
This component extends the JSX span element.
Name
Default
Options
`variant`
`secondary`
`primary``secondary``tertiary``success``info``warning``danger``primary-outline``secondary-outline``tertiary-outline``success-outline``info-outline``warning-outline``danger-outline`
`size`
`md`
`sm``md``lg`
`pill`
—
`true``false`
Examples
Variants
Badges come in a variety of variants, each with its own color and style.
Size
The size prop can be used to change the size of the badge.
Pill
The pill prop can be used to create a pill-shaped badge.
Icon
You can add an icon to the badge.