Badge

Small status labels for highlighting categories, statuses, or counts with multiple visual variants.

Preview

Core Variants

Bestseller

New

Sold Out

Featured

Brand Colors

Trending

Available

New Location

Limited Beds

Usage

tsx

import { Badge } from "zostel-ui";

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="brand">Brand</Badge>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "brand"`	"default"	Visual style variant of the badge
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Badge label content

variant

Type: "default" | "secondary" | "destructive" | "outline" | "brand"

Default: "default"

Visual style variant of the badge

className

Type: string

Default: —

Additional CSS classes

children

Type: ReactNode

Default: —

Badge label content

Previous Card Next Separator