Badge
Compact label for statuses and inline metadata, with semantic colors, three variants and sizes, icon support, and a loading state.
import { Badge } from "@plexui/vue/components/Badge";Examples
Overview
Colors & variants
Size & roundness
size
Icon
Loading
API
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | VNode[] | — | Content inside the badge |
color | "secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution" | "secondary" | Semantic color |
variant | "solid" | "soft" | "outline" | "soft" | Style variant |
size | "sm" | "md" | "lg" | "sm" | Badge size |
pill | boolean | false | Fully rounded |
class | string | — | Class applied to the badge |
Styling
Badge reads these component tokens. Override them at any scope to restyle it:
--badge-font-size-lg: font size lg (defaultvar(--font-text-sm-size))--badge-font-size-md: font size md (defaultvar(--font-text-sm-size))--badge-font-size-sm: font size sm (defaultvar(--font-text-xs-size))--badge-font-weight-lg: font weight lg (defaultvar(--font-weight-semibold))--badge-font-weight-md: font weight md (defaultvar(--font-weight-semibold))--badge-font-weight-sm: font weight sm (defaultvar(--font-weight-semibold))--badge-gutter-lg: gutter lg (defaultvar(--control-gutter-xs))--badge-gutter-md: gutter md (defaultvar(--control-gutter-2xs))--badge-gutter-sm: gutter sm (defaultcalc(var(--control-gutter-2xs) - 1px))--badge-icon-font-size-lg: icon font size lg (defaultvar(--font-text-md-size))--badge-icon-font-size-md: icon font size md (defaultvar(--font-text-md-size))--badge-icon-font-size-sm: icon font size sm (defaultvar(--font-text-xs-size))--badge-indicator-size-lg: indicator size lg (defaultvar(--font-text-sm-size))--badge-indicator-size-md: indicator size md (defaultvar(--font-text-xs-size))--badge-indicator-size-sm: indicator size sm (defaultvar(--font-text-xs-size))--badge-radius-lg: radius lg (defaultvar(--radius-sm))--badge-radius-md: radius md (defaultvar(--radius-xs))--badge-radius-sm: radius sm (defaultvar(--radius-xs))--badge-size-lg: size lg (defaultvar(--control-size-2xs))--badge-size-md: size md (defaultvar(--control-size-3xs))--badge-size-sm: size sm (defaultcalc(var(--control-size-3xs) - 2px))--badge-tracking-lg: tracking lg (defaultvar(--tracking-normal))--badge-tracking-md: tracking md (defaultvar(--tracking-normal))--badge-tracking-sm: tracking sm (defaultvar(--tracking-wide))