Pular para o conteúdo

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

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.

🛒

Press Enter to start editing

Content

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

🛍

4

🔔

Press Enter to start editing

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
Press Enter to start editing

Maximum value

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

9999+999+
Press Enter to start editing

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.

Press Enter to start editing

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.

Press Enter to start editing

Unstyled