CounterBadge
<CounterBadge count={5} />
Best Practices
- Beziehe das CounterBadge eindeutig auf ein Element. Das kann zum Beispiel ein Button oder Tab sein.
- Setze CounterBadges sparsam ein. Zu viele auf engem Raum überfordern den User.
- Mach den Wert über das darunterliegende Element zugänglich. Das CounterBadge
selbst ist nicht accessible; auf einem Button enthält daher ein
aria-labeldie Zahl.
Ohne Inhalt
Ein CounterBadge kann auch ohne Inhalt verwendet werden, um auf einen Status hinzuweisen.
Hohe Zahlen
Ist der tatsächliche Wert 100 oder höher, wird stattdessen „99+“ im CounterBadge angezeigt.
Innerhalb eines Buttons
Um sich auf anderen Elementen besser abzuheben, hat das CounterBadge eine Border. Deren Farbe sollte an die Hintergrundfarbe angepasst werden.
Properties
| Property | Type | Description |
|---|---|---|
count | number | The number displayed inside the badge. |
elementType | span | ExoticComponent<{}> | The HTML element or React component rendered as the elements root. |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel. |
Accessibility
| Property | Type | Description |
|---|---|---|
aria-describedby | string | Identifies the element (or elements) that describes the object. @see aria-labelledby |
aria-hidden | Booleanish | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
aria-label | string | Defines a string value that labels the current element. @see aria-labelledby. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-describedby. |