Badge v0.1.0 Data display

Compact status label with tone and variant axes.

import { Badge } from "latticeui-react";

Examples

Tones

AccentNeutralActivePendingFailed

Show code

<Badge>Accent</Badge>
<Badge tone="neutral">Neutral</Badge>
<Badge tone="success">Active</Badge>
<Badge tone="warning">Pending</Badge>
<Badge tone="danger">Failed</Badge>

Variants

SubtleSolidOutline

Show code

<Badge variant="subtle">Subtle</Badge>
<Badge variant="solid">Solid</Badge>
<Badge variant="outline">Outline</Badge>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`span`	`[data-scope="badge"][data-part="root"]`

Props

Prop	Type	Default	Description
`variant`	`"subtle" \| "solid" \| "outline"`	`"subtle"`
`tone`	`"accent" \| "neutral" \| "success" \| "warning" \| "danger"`	`"accent"`

Accessibility

Roles:

Purely presentational; pair with visually-hidden text if the color conveys meaning.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="badge"][data-part="root"] {
  /* your overrides */
}

Component tokens: --badge-bg--badge-fg--badge-border

State attributes: data-variantdata-tone