@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
313 lines (268 loc) • 8.29 kB
Markdown
---
title: 'Badge'
description: 'The Badge component allows the user to focus on new or unread content or notifications.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:09.672Z
checksum: f2fdffcad5009ed5d60a6064a09adc13c2a32c7e624a3646ffdaebeeb43face9
---
# Badge
## Import
```tsx
import { Badge } from '@dnb/eufemia'
```
## Description
Badge can be overlayed on another element by wrapping it, or can be a standalone badge.
## Relevant links
- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=26322-25223)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/badge)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/badge)
### 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'`.
```tsx
render(<Badge content="New" />)
```
```tsx
render(
<div>
Text <Badge content="Info" variant="information" /> Text
</div>
)
```
#### Notification
`variant='notification'`.
```tsx
render(<Badge content={1} label="Notifications" variant="notification" />)
```
```tsx
render(
<div>
Text{' '}
<Badge content={1234} label="Notifications" variant="notification" />{' '}
Text
</div>
)
```
### Overlayed badge
You can overlay the badge on top of an element by wrapping the `<Badge>` component around it.
```tsx
render(
<Badge content="Ny" variant="information">
<Avatar.Group label="Persons">
<Avatar size="large" variant="secondary">
A
</Avatar>
</Avatar.Group>
</Badge>
)
```
```tsx
render(
<Badge content={1234} label="Notifications" variant="notification">
<Avatar.Group label="Persons">
<Avatar size="large">A</Avatar>
</Avatar.Group>
</Badge>
)
```
#### Setting property `horizontal` and `vertical`
When overlaying the badge you can control its position.
```tsx
render(
<Flex.Container>
<Badge
content={66}
label="Notifications"
vertical="top"
horizontal="left"
variant="notification"
data-visual-test="badge-top-left"
>
<Avatar.Group label="Persons">
<Avatar size="large">A</Avatar>
</Avatar.Group>
</Badge>
<Badge
content={1234}
label="Notifications"
vertical="top"
horizontal="right"
variant="notification"
data-visual-test="badge-top-right"
>
<Avatar.Group label="Persons">
<Avatar size="large">B</Avatar>
</Avatar.Group>
</Badge>
<Badge
content={13}
label="Notifications"
vertical="bottom"
horizontal="left"
variant="notification"
data-visual-test="badge-bottom-left"
>
<Avatar.Group label="Persons">
<Avatar size="large">C</Avatar>
</Avatar.Group>
</Badge>
<Badge
content={58}
label="Notifications"
vertical="bottom"
horizontal="right"
variant="notification"
data-visual-test="badge-bottom-right"
>
<Avatar.Group label="Persons">
<Avatar size="large">D</Avatar>
</Avatar.Group>
</Badge>
</Flex.Container>
)
```
### 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}`.
```tsx
render(
<Grid.Container
rowGap
columnGap
style={{
display: 'inline-grid',
placeItems: 'start',
gridTemplateColumns: 'repeat(2, auto)',
}}
>
<Badge content="default" status="default" />
<Badge content="default (subtle)" status="default" subtle />
<Badge content="neutral" status="neutral" />
<Badge content="neutral (subtle)" status="neutral" subtle />
<Badge content="positive" status="positive" />
<Badge content="positive (subtle)" status="positive" subtle />
<Badge content="warning" status="warning" />
<Badge content="warning (subtle)" status="warning" subtle />
<Badge content="negative" status="negative" />
<Badge content="negative (subtle)" status="negative" subtle />
</Grid.Container>
)
```
### 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` prop.
The example below hides the badge when there are no notifications. You can add or remove notifications with the "+" and "-" buttons.
```tsx
const Example = () => {
type Data = {
notifications: number
}
const { data } = Form.useData<Data>('badge-hide-example')
const notifications = data?.notifications
return (
<Form.Handler id="badge-hide-example">
<Form.Card>
<Badge
label="Notifications"
variant="notification"
content={notifications}
hideBadge={notifications === 0}
>
<Avatar.Group label="Persons">
<Avatar size="large">A</Avatar>
</Avatar.Group>
</Badge>
<Field.Number
label="Define number of notifications"
width="small"
path="/notifications"
defaultValue={1}
minimum={0}
step={1}
showStepControls
/>
</Form.Card>
</Form.Handler>
)
}
render(<Example />)
```
## Properties
```json
{
"props": {
"content": {
"doc": "Content of the component.",
"type": ["string", "number", "React.ReactNode"],
"status": "optional"
},
"children": {
"doc": "Content to display the badge on top of.",
"type": "React.ReactNode",
"status": "optional"
},
"vertical": {
"doc": "Vertical positioning of the component. Options: `bottom` | `top`.",
"type": ["\"top\"", "\"bottom\""],
"status": "optional"
},
"horizontal": {
"doc": "Horizontal positioning of the component. Options: `left` | `right`.",
"type": ["\"left\"", "\"right\""],
"status": "optional"
},
"className": {
"doc": "Custom className for the component.",
"type": "string",
"status": "optional"
},
"skeleton": {
"doc": "Applies loading skeleton.",
"type": "boolean",
"status": "optional"
},
"variant": {
"doc": "Defines the visual appearance of the badge. There are two main variants `notification` and `information`. The `content` variant is just for placement purposes, and will require you to style the `content` all by yourself. Default variant is `information`.",
"type": ["\"information\"", "\"notification\"", "\"content\""],
"status": "optional"
},
"status": {
"doc": "Defines the status color of the `\"information\"` variant. Has no effect on other variants. Default is `\"default\"`.",
"type": [
"\"default\"",
"\"positive\"",
"\"warning\"",
"\"negative\"",
"\"neutral\""
],
"status": "optional"
},
"subtle": {
"doc": "Applies subtle style to `\"information\"` variant. Has no effect on other variants. Default is `false`.",
"type": "boolean",
"status": "optional"
},
"hideBadge": {
"doc": "Removes the badge without removing children. Useful when Badge wraps content. Default is `false`.",
"type": "boolean",
"status": "optional"
},
"label": {
"doc": "The label description of the badge. Only required when passing a number as the badge content.",
"type": "React.ReactNode",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```