Badge – Once UI

A versatile component for displaying highlighted information, labels, or interactive elements in a pill-shaped container. Commonly used to draw attention to important information or provide interactive links.

Badge

New feature

Coming soon

Learn more

<Badge id="badge-1" title="New feature" effect={false} arrow={false} paddingX="12" paddingY="8" onBackground="brand-medium" background="brand-alpha-weak" textVariant="label-default-s" />
<Badge id="badge-2" title="Coming soon" icon="calendar" arrow={false} paddingLeft="12" paddingRight="16" paddingY="8" onBackground="brand-medium" background="brand-medium" />
<Badge id="badge-3" title="Learn more" href="#"/>

Icon

Add icons to badges to enhance visual communication.

Icon

New release

Improved security

New: Dark mode

<Badge title="New release" icon="rocket" arrow={false} effect={false}/>
<Badge title="Improved security" icon="check" arrow={false} effect={false}/>
<Badge title="New: Dark mode" icon="dark" arrow={false} effect={false}/>

Link

Badges can be made interactive by adding the href prop, turning them into links.

Interactive badges

Documentation

<Badge href="#" id="badge-4" title="Documentation" icon="pages" textVariant="label-default-s" />

Arrow

Badges can be displayed without the arrow indicator by setting the arrow prop to false. If using multiple badges on a page, add custom id to each badge to ensure the arrow gets rendered.

Arrow

With arrow

Without arrow

<Badge id="badge-5" title="With arrow"/>
<Badge title="Without arrow" arrow={false} />

Effect

Disable the hover animation effect by setting the effect prop to false.

Effect

With effect

Without effect

<Badge title="With effect" icon="play" />
<Badge title="Without effect" icon="pause" effect={false} />

Custom content

Badges can contain custom content using children instead of the title prop.

Custom content

New

Custom content

<Badge id="badge-6" paddingY="4" paddingLeft="4" paddingRight="16" radius="m" gap="12" textVariant="label-default-s" border="neutral-medium" background="neutral-alpha-weak">
  <Tag>New</Tag>
  Custom content
</Badge>

API reference

Prop	Type	Default
title The label. Use this or children, not both — they render the same text twice.	string	—
icon Icon before the label.	IconName	—
arrow Trailing arrow. On by default once href is set.	boolean	href ? true : false
children	React.ReactNode	—
href Makes it a link.	string	—
effect The shine that runs across it. Turn it off for a static badge.	boolean	true
className	string	—
style	React.CSSProperties	—
id Element id.	string	—
…and every FlexProps prop	inherited	—