Skip to content

Badge

Badge generates a small badge to the top-right of its child(ren).

Introduction

The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.

<Badge />

Playground

Color

size

Component

After installation, you can start building with this component using the following basic elements:

import Badge from '@mui/joy/Badge';

export default function MyApp() {
  return <Badge />;
}

Basic usage

The default appearance of the Badge is a dot with a primary color.

🛒

<Badge>
  <Typography fontSize="xl">🛒</Typography>
</Badge>

Content

Use a string or number as value for the badgeContent prop to display content.

🛍

4

🔔

<Badge badgeContent={4}>
  <Typography fontSize="xl">🛍</Typography>
</Badge>
<Badge badgeContent="">
  <Typography fontSize="xl">🔔</Typography>
</Badge>

The badge automatically hidden if badgeContent is zero. You can change this by toggling on the showZero prop.

🛍

0

Visibility

Control the badge visibility using the invisible prop.

🛍

12
<Badge badgeContent={12} invisible={invisible}>
  <Typography fontSize="xl">🛍</Typography>
</Badge>
<Switch
  startDecorator="invisible"
  checked={invisible}
  onChange={(event) => setInvisible(event.target.checked)}
  variant={invisible ? 'solid' : 'outlined'}
  sx={{ '--Switch-track-width': '40px' }}
/>

Maximum value

Use the max prop to cap the content to a maximum value.

9999+999+
<Badge badgeContent={99}>
  <MailIcon />
</Badge>
<Badge badgeContent={100} badgeInset="0 -6px 0 0">
  <MailIcon />
</Badge>
<Badge badgeContent={1000} max={999} badgeInset="0 -12px 0 0">
  <MailIcon />
</Badge>

Position

Use the anchorOrigin prop to control the badge position to any corner of the child element.

<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

Inset

The badgeInset prop gives you precise control of the badge's position. Use a string value matching the inset CSS property syntax.

<Badge badgeInset="14%" color="danger">
  <Avatar src="/static/images/avatar/1.jpg" />
</Badge>

Accessibility

Make sure to always provide a meaningful description to the aria-label prop, regardless if it is on the badge or the component wrapping it.

<IconButton color="neutral" aria-label={notificationsLabel(100)}>
  <Badge badgeContent={100} badgeInset="-20%">
    <MailIcon />
  </Badge>
</IconButton>

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.