Badge
Use GdsBadge to overlay a count or status dot on a child element - typically an icon inside GdsIconButton, or an avatar for online status.
Wrap the child in GdsBadge; the badge positions itself relative to that element.
What GDS provides
| Prop | GDS values | Notes |
|---|---|---|
color | primary, success, error | MUI colors (default, secondary, etc.) are not supported |
variant | standard, dot | Standard shows badgeContent; dot is an 8px indicator |
All other props follow MUI behavior: badgeContent, max, showZero, invisible, overlap, anchorOrigin.
showZero only applies when badgeContent is 0 - by default a zero count hides the badge.
Usage
Place GdsBadge inside GdsIconButton (MUI pattern). Always set aria-label on the button.
import { GdsBadge } from "@granicus/gds-core/GdsBadge";
import { GdsIconButton } from "@granicus/gds-core/GdsIconButton";
import { MailIcon } from "@granicus/gds-core/MailIcon";
<GdsIconButton aria-label="show 4 unread messages">
<GdsBadge badgeContent={4} color="primary">
<MailIcon />
</GdsBadge>
</GdsIconButton>Colors
Dot variant
Use variant="dot" for a compact status indicator without a count.
Position
Use anchorOrigin to place the badge on any corner. Icon buttons use top-right by default (MUI). Avatar status dots use bottom-right.
Visibility
showZero only applies when badgeContent is 0. By default a zero count hides the badge - pass showZero to keep showing 0. Use invisible to hide the badge regardless of count.
Props
External references
For the full and always up-to-date props, use the MUI references below.