Badge

The Badge component is a versatile element for displaying labels, status indicators, or metadata. It comes with various styles and sizes to suit different use cases.

Basic Usage

The Badge component requires one prop:

• text: The content to display inside the badge

<Badge text="Default Note" />

Variants

The Badge component comes with five different variants to convey different types of information:

<Badge text="Note" variant="note" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="Danger" variant="danger" />
<Badge text="Info" variant="info" />

Sizes

The Badge component supports three different sizes through the optional size prop:

<Badge text="Small" variant="info" size="sm" />
<Badge text="Medium" variant="info" size="md" />
<Badge text="Large" variant="info" size="lg" />

Props