#Badge

#Import

import { Badge } from '@dnb/eufemia'

#Description

Badge generates a small badge on its children, or can be an inline/standalone badge.

#Relevant links

• Figma
• Source code
• Docs code

#Badge variants

#Notification Badge

The notification badge has a very limited use. The area of use is currently limited to a counter of messages in the message center.

#Information Badge

Can be used to describe or inform about new activity or features in our applications. The label can be placed on top of element backgrounds or inline with text within cells.

The logic of how long it should be visible would differ from case to case, so that's up to the designer.

#Demos

#Setting the variant property

#Information

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

#Notification

variant='notification'.

#Usage examples

#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}.

#Setting property horizontal and vertical

#vertical 'top' horizontal 'left'

#vertical 'top' horizontal 'right'

#vertical 'bottom' horizontal 'left'

#vertical 'bottom' horizontal 'right'