Badge

Number or status indicator appearing at the top-right corner of an icon or text.

Basic Usage

Set the displayed number with count.

⁵¹⁵⁹⁹⁺

<ABadge :count="5">
  <ABtn size="sm">Messages</ABtn>
</ABadge>
<ABadge :count="15">
  <ABtn size="sm">Comments</ABtn>
</ABadge>
<ABadge :count="100">
  <ABtn size="sm">Notifications</ABtn>
</ABadge>

Dot

Set dot to show only a red dot without a number.

<ABadge dot>
  <ABtn size="sm">Messages</ABtn>
</ABadge>

Processing

Set processing to show a pulse animation.

<ABadge processing>
  <ABtn size="sm">Processing</ABtn>
</ABadge>

Custom Color

Set badge color with color.

⁸³

<ABadge :count="8" color="#22c55e">
  <ABtn size="sm">Passed</ABtn>
</ABadge>

API

Props

Name	Type	Default	Description
count	number	—	Displayed number
max	number	99	Max value, shows N+ when exceeded
dot	boolean	false	Show as red dot
offset	[number, number]	—	Offset [horizontal, vertical]
color	string	—	Custom color
showZero	boolean	false	Show when count is 0
processing	boolean	false	Processing pulse animation

Interaction

• Number changes with spring elastic transition
• Badge slightly enlarges on hover
• Processing mode shows pulse diffusion animation