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.

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.

Content

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

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

Visibility

Control the badge visibility using the invisible prop.

Maximum value

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

Position

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

Inset

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

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.

Unstyled

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