Compact label for statuses and inline metadata, with semantic colors, three variants and sizes, icon support, and a loading state.

import { Badge } from "@plexui/ui/components/Badge";

Examples

Overview

Successful

In progress

Failed

Beta

Caution

Colors & variants

secondary

success

warning

danger

info

discovery

caution

soft

Sample

solid

Sample

outline

Sample

Size & roundness

size

pill

New

Icon

Beta

Loading

In progress

API

Prop	Type	Default	Description
`children`	`ReactNode`	—	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
`className`	`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 (default var(--font-text-sm-size))
--badge-font-size-md: font size md (default var(--font-text-sm-size))
--badge-font-size-sm: font size sm (default var(--font-text-xs-size))
--badge-font-weight-lg: font weight lg (default var(--font-weight-semibold))
--badge-font-weight-md: font weight md (default var(--font-weight-semibold))
--badge-font-weight-sm: font weight sm (default var(--font-weight-semibold))
--badge-gutter-lg: gutter lg (default var(--control-gutter-xs))
--badge-gutter-md: gutter md (default var(--control-gutter-2xs))
--badge-gutter-sm: gutter sm (default calc(var(--control-gutter-2xs) - 1px))
--badge-icon-font-size-lg: icon font size lg (default var(--font-text-md-size))
--badge-icon-font-size-md: icon font size md (default var(--font-text-md-size))
--badge-icon-font-size-sm: icon font size sm (default var(--font-text-xs-size))
--badge-indicator-size-lg: indicator size lg (default var(--font-text-sm-size))
--badge-indicator-size-md: indicator size md (default var(--font-text-xs-size))
--badge-indicator-size-sm: indicator size sm (default var(--font-text-xs-size))
--badge-radius-lg: radius lg (default var(--radius-sm))
--badge-radius-md: radius md (default var(--radius-xs))
--badge-radius-sm: radius sm (default var(--radius-xs))
--badge-size-lg: size lg (default var(--control-size-2xs))
--badge-size-md: size md (default var(--control-size-3xs))
--badge-size-sm: size sm (default calc(var(--control-size-3xs) - 2px))
--badge-tracking-lg: tracking lg (default var(--tracking-normal))
--badge-tracking-md: tracking md (default var(--tracking-normal))
--badge-tracking-sm: tracking sm (default var(--tracking-wide))

AlertInline message for notices and warnings with semantic colors, variants, a title, a description, action slots, and a dismiss control.AvatarAn avatar for user identities that shows an initial, a photo or an icon, with overflow counts, semantic colors and roundness options.Shimmer TextText with a shimmer animation for loading and in-progress states, always on or toggled with a graceful stop.IndicatorsLoading and progress indicators, from circular spinners and determinate progress rings to animated dots, with configurable color and stroke.

Badge

Related components

On this page