#Badge

#Demos

#Setting the variant property

#Information

The default variant. Equivalent to variant='information'.

#Notification

variant='notification'.

#Overlayed badge

You can overlay the badge on top of an element by wrapping the <Badge> component around it.

#Setting property horizontal and vertical

When overlaying the badge you can control its position.

#Setting the status and subtle properties

The information variant has 5 possible status values, and two possible subtle values.

The default state is equivalent to status='default' and subtle={false}.

#Hiding Badge with hideBadge

Sometimes you need to hide the badge without hiding the overlayed element. To make this less complicated you can use the hideBadge property.

The example below hides the badge when there are no notifications. You can add or remove notifications with the "+" and "-" buttons.