Badge#

Import#

import { Badge } from '@dnb/eufemia'

Description#

Badge can be overlaid on another element by wrapping it, or can be a 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.

Related components#

Badge is part of the Feedback and dialogs category. More components in this category:

• Dialog — when people need to make a choice or read an important message before continuing.
• Drawer — to show extra content in a panel that slides in from the side.
• Form status — to show validation errors, warnings, or messages near a form.
• Global error — to show a clear 404 or 500 error page.
• Global status — to show important page-level messages or a summary of form errors.
• Modal — when people must focus on one task or message before returning to the page.

See all in Feedback and dialogs →

Demos#

Setting the variant property#

Information#

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

Notification#

variant='notification'.

Overlaid badge#

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

Overlaid button#

The button remains clickable where the badge overlaps it. Use horizontal and vertical to select the badge corner.

const Example = () => {
  const [notifications, setNotifications] = useState(1)
  return (
    <Badge
      content={notifications}
      label="Notifications"
      variant="notification"
      horizontal="right"
      vertical="top"
    >
      <Button
        text="Add notification"
        onClick={() => setNotifications((count) => count + 1)}
      />
    </Badge>
  )
}
render(<Example />)

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 overlaid 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.