Components
Badge
A badge is a component that is used to highlight an item's status for quick recognition.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Variants
Default
Destructive
Outline
Secondary
Shadcn
Origin UI
Sizes
Three sizes are available for badges: sm, md, and lg.
Colors
Use color with the soft, solid or outline variant. There are 30 colors: primary, the whole Tailwind palette (red to rose, slate, gray, zinc, neutral, stone and the newer taupe, mauve, mist and olive) and the error, warning and success aliases. The badgeColors array in ~/utils/badge-colors lists them all, and every color has light and dark styles.
Styles
soft is a tinted badge, solid is filled, outline only draws the border and modern is a neutral card where the color is used for the dot. soft, solid and modern use gray when no color is set. An outline badge without a color keeps the neutral look it always had, and the other variants (default, secondary, destructive, success, warning, info, error and ghost) did not change. The same colors and styles are used by the Tag Group.
soft
solid
outline
modern
Shapes
Use shape="rounded" (default) or shape="pill".
Icons
icon renders an icon before the text and trailing-icon one after it. The leading and trailing slots replace them with any content.
Dots
The modern variant shows a dot colored by color. Add dot to show one on any other variant.
Avatars
Use avatar to show an image before the text.
Links and buttons
A badge renders a link when it has to or href, a button when it has an @click handler and a div otherwise. Use tag to render any other element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "error" | "ghost" | "soft" | "solid" | "modern" | "default" | The style of the badge. |
color | BadgeColor | Color of the soft, solid and outline variants, and of the dot of modern. gray when a color is needed and none is set. | |
size | "sm" | "md" | "lg" | "sm" | The size of the badge. |
shape | "rounded" | "pill" | "rounded" | The shape of the badge. |
icon | string | Icon shown before the text. | |
trailing-icon | string | Icon shown after the text. | |
dot | boolean | false | Show a colored dot before the text. The modern variant shows one unless an icon or avatar is set. |
avatar | string | Image shown before the text. | |
disabled | boolean | false | Dims the badge and shows the not-allowed cursor. |
tag | string | The element to render the badge as. | |
to / href | string | Renders the badge as a link. Accepts the props of NuxtLink. |
| Slot | Description |
|---|---|
default | The text of the badge. |
leading | Content before the text. Replaces dot, avatar and icon. |
trailing | Content after the text. Replaces trailing-icon. |