Layout Badge

Badge

A small label: new, open, full, a room type.

Preview

Core variants

New

Dorm

Full

Zostel Plus

Brand and status

LIVE IT. NOW

Open

New place

Few beds left

Usage

tsx

import { Badge } from "zostel-ui";

<Badge>New</Badge>
<Badge variant="success">Open</Badge>
<Badge variant="warning">Few beds left</Badge>
<Badge variant="outline">Zostel Plus</Badge>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "brand" \| "success" \| "info" \| "warning"`	`"default"`	Flat brand colours only. success #00866E, info Ocean #0072BC, warning Marigold #FAA619 with Steel Grey text (the brand’s AA-checked roles).
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

variant

Default: "default"

Flat brand colours only. success #00866E, info Ocean #0072BC, warning Marigold #FAA619 with Steel Grey text (the brand’s AA-checked roles).

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).