Badge

Counter or status mark on ui elements

Use badge when you need to show a notification on some element such as button or icon. Remember to keep your content inside this element short, and definitely make sure it isn't wider that the element inside.

Variants

Badge has the same variants as most other elements (minus the outline variants used with buttons). Default variant is primary.

2

5

135

8

23

1

65

Position

You can position your badge in any of the four corners. Default position is top-right.

25

25

25

25

Keyboard badge

When you have a button that performs an action that is also triggered using keyboard, you can use special variants keyboard and keyboard-plain to show this key combination to users. Simply add keys separated by + sign in content prop (note there are spaces around +), and badge will display it accordingly.

CtrlM

CtrlL

Empty content badge

You can leave out the content prop, or leave it empty, to get the little notification circle and draw users attention.

New messages

Slots reference

Slot	Description
default	The default slot should contain the component or ui element on top of which the badge will be shown.

Props reference

Prop	Type	Default	Accepts	Description
position	String	top-right	top-right, top-left, bottom-right, bottom-left	Determines the corner where a badge will be shown.
variant	String	primary	primary, secondary, danger, success, warning, info, plain	A color of the badge
content	String	empty	Any string or number	A content that should be shown in badge.
block	Boolean	false	true or false	When set on true, badge will take up the 100% width of parent container.