Badge

stable

Compact status or count label in four styles.

since v1.00.6 kB gzip

Preview

Code

v3.6.8StableBetaBreakingDeployed

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add badge

React

Import only

import { Badge } from "@/components/strata";

<Badge variant="dot" color="success">Deployed</Badge>

Prop	Type	Default
`variant` Visual style.	"solid" \| "soft" \| "outline" \| "dot"	"soft"
`color` Tone.	"brand" \| "neutral" \| "success" \| "warning" \| "danger"	"neutral"
`shape` Corner style.	"default" \| "pill"	"default"

Avatar

User image with initials fallback, presence dot and stacked groups.

Kbd

Renders keyboard shortcuts consistently across platforms.

Was this page helpful?

Documented since v1.0 · components/badge.mdx