Theme

Beside content

Search indexingReady for review

Status tones

NewReadyIn reviewNeeds changesBlockedArchived

Quiet labels

Use outline for an open marker without the highlight.

DraftPlannedOptional

Custom marker

The start slot replaces the dot with your own visual.

ReviewedFailed

API reference: <cad-badge>

tonetoneCadBadgeTone'neutral'variantvariantCadBadgeVariant'solid'toneCadBadgeTonetoneyesvariantCadBadgeVariantvariantyes(default)Badge label.startOptional leading visual, replacing the decorative status marker.baseBadge container.labelBadge text.startLeading composition slot.markerDecorative status marker, used when the start slot is empty.--cad-badge-bgMarker-wash color.--cad-badge-inkPer-instance foreground color.

Accessibility

Write the status in text; color and markers are supporting cues. Use Alert for announcements and Button for actions.

Back to top