ComponentsFoundations
A small label for status, counts and tags.
components/badge.tsxtheme · material · accent · density · font
Published
Installation
$ pnpm add @vamos-cms/ui
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-cms/ui/styles.css";
Usage
import { Badge } from "@vamos-cms/ui";
<Badge tone="success" dot>Published</Badge>Examples
Tones
Colours carry meaning: success, warning, danger, info. Don't use them as decoration.
DraftFeaturedPublishedScheduledIn reviewRejectedPinned
Content status
Suggested mapping for record statuses.
PublishedScheduledIn reviewDraft
API
Badge
| Prop | Type | Default |
|---|---|---|
toneSemantic colour. | "neutral" | "accent" | "success" | "warning" | "danger" | "info" | "outline" | "neutral" |
sizeHeight. | "sm" | "md" | "sm" |
dotStatus dot before the label. | boolean | false |