Skip to content

Import

import { Badge } from '@dnb/eufemia'

Description

Badge generates a small badge on its child(ren), or can be a inline/standalone badge.

Badge variants

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.

Notification Badge

The notification badge has a very limited use. Area of use is limited as of now, as a counter of messages in the message's center.

We only show single digits in the counter. If there are more notifications than that, we show “9+”.

Demos

Setting property variant

default variant is 'information'

New
Text Info Text
PersonsANy

variant 'notification'

Notifications 1
Text Notifications 1 Text
PersonsANotifications 1

Setting property horizontal and vertical

vertical 'top' horizontal 'left'

PersonsANotifications 9+

vertical 'top' horizontal 'right'

PersonsANotifications 1

vertical 'bottom' horizontal 'left'

PersonsANotifications 9+

vertical 'bottom' horizontal 'right'

PersonsANotifications 9+

Alternatives

Profile picture
Notifications 9+