Components / Atoms

Badge

A small and adaptive inline status indicator for adding context to just about any content

The badge is a small inline element ideal for data heavy interfaces. It’s useful for drawing attention to the elements near it – for example, as a "New" label or unread count. Badges are nearly always pinned on another element (inline), so if you’re thinking about using a <u-badge> component on its own, consider a <u-tag> component instead.

Default#

Badge

Tones & Variants#

Pulse#

Primary
Secondary
Tertiary
Quaternary
Neutral
Info
Positive
Warning
Critical

With Buttons#

Coming Soon

With Menus#

Coming Soon

API#

Coming Soon