Preview
The default subtle badge identifies an item without competing with nearby controls.
Installation
Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.
Basic usage
Structure
Examples
Subtle
The borderless, filled style is the default. Use it for most labels.
Outline
Use a transparent surface with a visible border when the label needs more definition.
Status tones
Success, warning, error, and info use the same subtle or outline treatment in their own color scale. Neutral is the default tone. Keep the status clear in the text.
Sizes
Use small for compact metadata and medium for the usual label. The preview shows small first, then medium.
Decorative dot
Use a dot as a secondary visual cue. The visible words still carry the meaning.
Decorative icon
Use a recognizable icon with text. If icon and dot are both set, the icon takes precedence.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Sets label. | |
variant | BadgeVariant | "subtle" | Sets variant. |
tone | BadgeTone | "neutral" | Sets tone. |
size | BadgeSize | "md" | Sets size. |
dot | boolean | false | Sets dot. |
icon | React.ReactNode | Sets icon. |