Badge

The Badge component is a small, flexible UI element used to display short labels, statuses, or tags for filtering.

Variants

The Badge component comes in different color variants to suit various contexts.

White Black Gray Blue Yellow Rose Pink

<Badge size="medium" variant="blue">Blue</Badge>

The Badge component is available in three sizes: small, medium, and large.

Small Medium Large

<Badge size="small" variant="gray">Small</Badge>

<Badge size="medium" variant="gray">Medium</Badge>

<Badge size="large" variant="gray">Large</Badge>

The Badge component can be referenced using the following format:

import Badge from "../../components/Badge";

<Badge size="medium" variant="gray">Label</Badge>