ComponentsPrimitives
Badge
A small non-interactive label with variants and sizes.
Install
npx ghostcn@1.4.0 add badge --skip-existingUsage
This badge is a label, not an interactive control. Use Button for an action or link.
{{> "components/badge" text="Featured"}}Component options
| Parameter | Behavior |
|---|---|
variant | Visual treatment; unknown values fall back to default. Values: default, secondary, outline, destructive. Default: default. |
size | Component scale; unknown values fall back to default. Values: sm, default, lg. Default: default. |
text | Escaped badge label. Default: Label. |
Customize this instance
{{> "components/badge" text="Featured" class="rounded-full bg-purple-700 text-white"}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .ghcn-ui-badge |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/badge.hbsassets/css/components/badge.css
Was this helpful?