Badges are used to highlight an item's status for quick recognition.
import { Badge } from "@deca-ui/react"
<Badge>Default</Badge>
Use the size
prop to change the size of the Badge. You can set the value to sm
, md
, or lg
.
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
Use the color
prop to change the color of the Badge. You can set the value to primary
, secondary
, success
, warning
or 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>
Use the pill
prop to have a completely rounded Badge.
<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>
Made by Heril Saha