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.

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

Made by Heril Saha