UI: Components

Badge

A badge is a small status or notification symbol that can be added to an avatar, button, chip, or other components. Use any tag — <b> is used in the examples — with a class of ui-badge.

Use with modifiers, --inline, --bottom-right and --top-right to fine-adjust position.
Use --text if text only.

KC 99

KC 👍

Button with badge5

Chip with badge4

Light badge4

Inline badge4

With textnew

With opposite color-scheme

KC 99

KC 👍

Button with badge5

Chip with badge4

Light badge4

Inline badge4

With textnew

With right-to-left

KC 99

KC 👍

Button with badge5

Chip with badge4

Light badge4

Inline badge4

With textnew