Badge

Inline labels with colors, icons, and links.

Badge showcase controls

Color

Icon

No clicks I just rest
Here is the guide to find your way
Example — beans are spilled.

Usage#

Put the label in square brackets. Add a color and, optionally, an icon.

Current status: :Badge[Ready]{color="green" icon="checkmark"}.

Add href to transform a badge into a link.

:Badge[Cards]{href="/docs/frontend/components/card-and-grid" color="blue"}

Use legend instead of href for a hover-triggered explanation instead of a link.

:Badge[Preview]{legend="Available to try; still being refined." color="amber"}

hrefDefault undefined: string; Internal or HTTP(S) destination. Linked badges cannot have a legend.

legendDefault undefined: string; Supplementary text shown in an infotip. Omit for a plain badge; cannot be combined with href.