Badge
Badge is a neobrutalist React component from Cruise UI. A small label for status or category: Paid, New, Sold out. Install it with npx shadcn@latest add @cruiseui/badge.
Install
Terminal
npx shadcn@latest add @cruiseui/badgeFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
NewMost popularPaidOverdueSale
import { CruiseBadge } from "@/components/cruise/badge";
export default function BadgeExample() {
return (
<div className="flex flex-wrap items-center gap-3">
<CruiseBadge>New</CruiseBadge>
<CruiseBadge tone="primary">Most popular</CruiseBadge>
<CruiseBadge tone="success">Paid</CruiseBadge>
<CruiseBadge tone="danger">Overdue</CruiseBadge>
<CruiseBadge tone="muted" sticker>
Sale
</CruiseBadge>
</div>
);
}
<span class="badge">New</span>
<span class="badge on-primary">Most popular</span>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Short status or category labels next to content.
When not to
Anything people can click (use a Button). Long text.
Props
CruiseBadge
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | — |
tone? | CruiseBadgeTone | "surface" | — |
sticker? | boolean | — | Rotates -3deg for a sticker look. Max 1–2 per screen. |
className? | string | — | — |
Accessibility
- Plain text, so screen readers read it in place.
- Status colours always come with a word (Paid, Overdue), never colour alone.