---
title: Badge
description: Use Badge to highlight new, unread, or important information.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.049Z
checksum: e44c4039c20189a099f5d28fc7d21f0fc5bcbc5f2c5f3677fe8bc23bd807d85f
---

# Badge

## Import

```tsx
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](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/web/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.


## Related components

Badge is part of the [Feedback and dialogs](/web/components/overview/#feedback) category. More components in this category:

- [Dialog](/web/components/dialog/) – when people need to make a choice or read an important message before continuing.
- [Drawer](/web/components/drawer/) – to show extra content in a panel that slides in from the side.
- [Form status](/web/components/form-status/) – to show validation errors, warnings, or messages near a form.
- [Global error](/web/components/global-error/) – to show a clear 404 or 500 error page.
- [Global status](/web/components/global-status/) – to show important page-level messages or a summary of form errors.
- [Modal](/web/components/modal/) – when people must focus on one task or message before returning to the page.

[See all in Feedback and dialogs](/web/components/overview/#feedback)


## Demos

### Setting the `variant` property

#### Information

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


```tsx
render(<Badge content="New" />)
```



```tsx
render(<P>
      Text <Badge content="Info" variant="information" /> Text
    </P>)
```


#### Notification

`variant='notification'`.


```tsx
render(<Badge content={1} label="Notifications" variant="notification" />)
```



```tsx
render(<Flex.Container gap="small">
      {[0, 1, 2, 8, 10, 99, 1234].map(content => <Badge key={content} content={content} label="Notifications" variant="notification" />)}
    </Flex.Container>)
```



```tsx
render(<P>
      Text{' '}
      <Badge content={1234} label="Notifications" variant="notification" />{' '}
      Text
    </P>)
```


### Overlaid 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>)
```


#### Overlaid button

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


```tsx
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.


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


```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 />);
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## 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. Defaults to `\"default\"`.",
      "type": [
        "\"default\"",
        "\"positive\"",
        "\"warning\"",
        "\"negative\"",
        "\"neutral\""
      ],
      "status": "optional"
    },
    "subtle": {
      "doc": "Applies subtle style to `\"information\"` variant. Has no effect on other variants. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "hideBadge": {
      "doc": "Removes the badge without removing children. Useful when Badge wraps content. Defaults to `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](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```