Badge

Badges are used to highlight an item's status for quick recognition.

Import

import { Badge } from "@deca-ui/react"

Usage

Default

<Badge>Default</Badge>

Sizes

Use the size prop to change the size of the Badge. You can set the value to sm, md, or lg.

Small Medium Large

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

Colors

Use the color prop to change the color of the Badge. You can set the value to primary, secondary, success, warning or error.

Primary Secondary Success Warning Error

<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="error">Error</Badge>

Pill

Use the pill prop to have a completely rounded Badge.