Badge

Documentation and examples for badges, our small count and labeling component.

Style

You can use various props like bordered, dot, inline, rounded etc. to style the badge.

Use color prop to create various background badges.

You can use location prop to change the position of the badge. Possible values are top-end, bottom-end, bottom-start, top-start.

You can use icon prop or use slot to render the icon

You can use badge with avatar as status.

You can incorporate badges with dynamic content to make things such as a notification system.

You can do many things with v-isibility control, for example, show badge on hover.

Badges help convey information to the user in a variety of ways.

Use max prop to cap the value of the badge content

99+

999+