# label

UI Elements⚛ TSX Live preview

Shine-Sweep Badges

Pill badges in three tints with a diagonal light sweep that crosses on a loop, staggered.

HTMLCSSReactAdvanced

3.3k24.1k5.5kOpen

Status Badge Chips · Candy Pink

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Candy Pink palette.

17300Open

Status Badge Chips · Royal Gold

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Royal Gold palette.

62100Open

Status Badge Chips · Crimson Heat

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Crimson Heat palette.

12900Open

Status Badge Chips · Deep Indigo

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Deep Indigo palette.

42000Open

Status Badge Chips · Aurora Teal

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Aurora Teal palette.

75800Open

Status Badge Chips · Mono Pearl

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Mono Pearl palette.

29900Open

Status Badge Chips · Ultra Violet

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Ultra Violet palette.

9100Open

Status Badge Chips · Cyber Lime

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Cyber Lime palette.

8400Open

Floating Input

Input with floating label that lifts and shrinks on focus.

Tag Pill

Compact tag pill with optional remove icon on hover.

Divider with Label

Content divider with centered label and gradient line.

UI Elements⚛ TSX Live preview

Floating-Label Input Pair

Two inputs whose labels float above on focus, with error and success states.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Icon Button with Label

Icon-plus-label button with ripple, tooltip and disabled state.

HTMLCSSJavaScriptAdvanced