Badge
Badges show notifications, counts, or status information on navigation items and icons.
Simple Badged Button
The most common use-case is to render a Badge
in a Button
to display a
number of notifications the user should view. The badge will default to the
top-right of the button.
import { Badge } from "@react-md/core/badge/Badge";
import { Button } from "@react-md/core/button/Button";
import { SrOnly } from "@react-md/core/typography/SrOnly";
import NotificationsOutlinedIcon from "@react-md/material-icons/NotificationsOutlinedIcon";
import { type ReactElement } from "react";
export default function SimpleBadgedButtonExample(): ReactElement {
return (
<Button buttonType="icon">
<Badge>3</Badge>
<NotificationsOutlinedIcon />
<SrOnly>Notifications</SrOnly>
</Button>
);
}
Badge Themes
The Badge
can be themed with the normal theme colors using the theme
prop.
1111111©
import { Badge } from "@react-md/core/badge/Badge";
import { type CSSProperties, type ReactElement } from "react";
export default function BadgeThemesExample(): ReactElement {
return (
<>
<Badge style={style} theme="greyscale">
1
</Badge>
<Badge style={style} theme="primary">
1
</Badge>
<Badge style={style} theme="secondary">
1
</Badge>
<Badge style={style} theme="warning">
1
</Badge>
<Badge style={style} theme="success">
1
</Badge>
<Badge style={style} theme="error">
1
</Badge>
<Badge style={style} theme="surface">
1
</Badge>
<Badge style={style} theme="clear">
©
</Badge>
</>
);
}
const style: CSSProperties = {
position: "static",
};
Badge Position
The Badge
is positioned by using position: absolute
within a
position: relative
container and can be configured in a few ways:
- Change the core.$badge-offset variable which will apply to both
top
andright
- Change the core.$badge-offset-top and/or core.$badge-offset-right to only change one value
- Use the core.badge-set-var mixin to change the
offset
variable which will apply to both thetop
andright
- Use the core.badge-set-var mixin to change the
offset-top
and/oroffset-right
variables which will only change one value