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
Default Note
<Badge text="Default Note" />Variants
The Badge component comes with five different variants to convey different types of information:
Note Tip Caution Danger Info
<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:
Small Medium Large
<Badge text="Small" variant="info" size="sm" /><Badge text="Medium" variant="info" size="md" /><Badge text="Large" variant="info" size="lg" />Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
text | string | - | Yes | The text content to display inside the badge |
variant | "note" | "tip" | "caution" | "danger" | "info" | "note" | No | The style variant to use |
size | "sm" | "md" | "lg" | "sm" | No | The size of the badge |