Badge
A short status label on a pill, never a control
Deployments
6 deployments · 1 passed, 2 failed, 1 running, 1 queued, 1 stale
Installation
npx shadcn@latest add @sudokw/components-badgeimport { Badge } from "@gpuixui/components";Usage
import { Badge } from "@gpuixui/components/badge";
<Badge variant="success" size="sm">
Passed
</Badge>;
<Badge>main</Badge>;API reference
| Prop | Type | Default | Consequence |
|---|---|---|---|
variant | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "outline" | "neutral" — a stored name the union does not carry | the fill, ink and edge in Variants below |
size | "sm" | "md" | "md" — a stored name the union does not carry | the fixed type step and the pill's height in Sizes below |
className | string | none | joined last |
style | StyleDesc | none | merged last |
children | ReactNode | — | the label |
Variants
| Variant | Fill | Ink | Edge |
|---|---|---|---|
neutral | muted | mutedForeground | none |
primary | primary | primaryForeground | none |
success | successSoft | successSoftForeground | success at 30% |
warning | warningSoft | warningSoftForeground | warning at 30% |
danger | destructiveSoft | destructiveSoftForeground | destructive at 30% |
info | infoSoft | infoSoftForeground | info at 30% |
outline | none | mutedForeground | borderStrong |
Sizes
| Size | Type | Pill height |
|---|---|---|
sm | 12/16, weight 400 | 20px |
md | 14/20, weight 500 | 24px |
Edit this page on GitHubapps/docs/content/docs/components/badge.mdx