Badge
Overlays a count badge on a corner of an anchor element such as an icon or button.
Import
import { Badge } from "@cfa/react-core";Live Editor
Guidelines
When to use
- Badge is for counts on icons, buttons, tabs, or navigation items, such as unread messages or items that need attention.
Do
- Hide the badge when the count is 0.
- Show “99+” when the count is above 99.
Avoid
- Showing static totals when there is nothing new for people to see.
- Using Badge for long text labels. Use Chip.
- Making Badge the clickable control. Put it inside Button or Link when the whole area must be interactive.
Composition
badgeContent renders the count. children is the anchor element the badge overlaps, such as an icon or button.
For when to use badges, see the Badge guidelines.
Examples
Placement
Position the badge on any corner of its anchor element.
Content
Use 99+ for values larger than two digits.
Border
Pass border to add a white border when the badge sits on a busy background.
Visibility
Use hide to show or hide the badge. When hide is true, the badge animates out; when false, it animates in.