SINGULARITY
DOCS
Reference
Badge
The Badge component creates a small indicator positioned at the top-right of its child elements.
Basic badge
Demonstrations of badges with text, utilizing primary and secondary color schemes. The badge is attached to its child elements.
4
import * as React from 'react';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';
export default function SimpleBadge() {
return (
<Badge badgeContent={4} color="primary">
<MailIcon color="action" />
</Badge>
);
}Color
Apply the
color prop to use the theme’s color palette on the component.44
import * as React from 'react';
import Badge from '@mui/material/Badge';
import Stack from '@mui/material/Stack';
import MailIcon from '@mui/icons-material/Mail';
export default function ColorBadge() {
return (
<Stack spacing={2} direction="row">
<Badge badgeContent={4} color="secondary">
<MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
<MailIcon color="action" />
</Badge>
</Stack>
);
}Customization
This example illustrates how to customize the component. Learn more about customization options in the overrides documentation page.
import * as React from 'react';
import Badge, { BadgeProps } from '@mui/material/Badge';
import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
'& .MuiBadge-badge': {
right: -3,
top: 13,
border: `2px solid ${(theme.vars ?? theme).palette.background.paper}`,
padding: '0 4px',
},
}));
export default function CustomizedBadges() {
return (
<IconButton aria-label="cart">
<StyledBadge badgeContent={4} color="secondary">
<ShoppingCartIcon />
</StyledBadge>
</IconButton>
);
}Badge visibility
The display of badges can be managed using the
invisible prop.1
import * as React from 'react';
import Box from '@mui/material/Box';
import Badge from '@mui/material/Badge';
import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
import MailIcon from '@mui/icons-material/Mail';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
export default function BadgeVisibility() {
const [count, setCount] = React.useState(1);
const [invisible, setInvisible] = React.useState(false);
const handleBadgeVisibility = () => {
setInvisible(!invisible);
};
return (
<Box
sx={{
color: 'action.active',
display: 'flex',
flexDirection: 'column',
'& > *': {
marginBottom: 2,
},
'& .MuiBadge-root': {
marginRight: 4,
},
}}
>
<div>
<Badge color="secondary" badgeContent={count}>
<MailIcon />
</Badge>
<ButtonGroup>
<Button
aria-label="reduce"
onClick={() => {
setCount(Math.max(count - 1, 0));
}}
>
<RemoveIcon fontSize="small" />
</Button>
<Button
aria-label="increase"
onClick={() => {
setCount(count + 1);
}}
>
<AddIcon fontSize="small" />
</Button>
</ButtonGroup>
</div>
<div>
<Badge color="secondary" variant="dot" invisible={invisible}>
<MailIcon />
</Badge>
<FormControlLabel
sx={{ color: 'text.primary' }}
control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
label="Show Badge"
/>
</div>
</Box>
);
}The badge is hidden by default when
badgeContent is zero. This behavior can be overridden using the showZero prop.0
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';
export default function ShowZeroBadge() {
return (
<Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
<Badge color="secondary" badgeContent={0}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
<MailIcon />
</Badge>
</Stack>
);
}Maximum value
The
max prop can be used to limit the displayed value of the badge content.9999+999+
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';
export default function BadgeMax() {
return (
<Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
<Badge color="secondary" badgeContent={99}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={100}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={1000} max={999}>
<MailIcon />
</Badge>
</Stack>
);
}Dot badge
The
dot prop transforms the badge into a small dot, useful for indicating a change without displaying a count.import * as React from 'react';
import Box from '@mui/material/Box';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';
export default function DotBadge() {
return (
<Box sx={{ color: 'action.active' }}>
<Badge color="secondary" variant="dot">
<MailIcon />
</Badge>
</Box>
);
}Badge overlap
The
overlap prop allows you to position the badge relative to the corner of its wrapped element.import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Badge from '@mui/material/Badge';
const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
const shapeCircleStyles = { borderRadius: '50%' };
const rectangle = <Box component="span" sx={shapeStyles} />;
const circle = (
<Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
);
export default function BadgeOverlap() {
return (
<Stack spacing={3} direction="row">
<Badge color="secondary" badgeContent=" ">
{rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
{rectangle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" ">
{circle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
{circle}
</Badge>
</Stack>
);
}Badge alignment
Use the
anchorOrigin prop to adjust the badge’s position to any corner of the wrapped element.Accessibility
The badge content may not be announced correctly by assistive technologies. Provide a complete description, such as with the
aria-label attribute:import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';
function notificationsLabel(count: number) {
if (count === 0) {
return 'no notifications';
}
if (count > 99) {
return 'more than 99 notifications';
}
return `${count} notifications`;
}
export default function AccessibleBadges() {
return (
<IconButton aria-label={notificationsLabel(100)}>
<Badge badgeContent={100} color="secondary">
<MailIcon />
</Badge>
</IconButton>
);
}