Badge
A count anchored to the corner of another element.
When to use
Use Badge when you need a count anchored to the corner of another element.
Import
TypeScript
import { Badge } from '@gzodo/ui'Badge wraps a child and paints the count on the top-right corner. The count is hidden at 0 unless showZero is set. Values above 99 render as 99+.
Examples
3412
Count
The badge sits 6px outside the top-right of its child.
0
Zero
A count of 0 is hidden.
showZero keeps the badge on screen.Notifications
99+Overflow
Counts above 99 collapse to a single label.
Badge
4Badge
Property
Description
Type
Default
countValue shown in the corner. Above 99 it renders as 99+.
number0childrenElement the badge is anchored to.
ReactNode—
showZeroShow the badge when count is 0.
booleanfalseclassNameClass added on the wrapper.
string—