CounterBadge

Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin.

<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-label die Zahl.

Ein CounterBadge kann auch ohne Inhalt verwendet werden, um auf einen Status hinzuweisen.

<CounterBadge />

Ist der tatsächliche Wert 100 oder höher, wird stattdessen „99+“ im CounterBadge angezeigt.

<CounterBadge count={120} />

Um sich auf anderen Elementen besser abzuheben, hat das CounterBadge eine Border. Deren Farbe sollte an die Hintergrundfarbe angepasst werden.

<Button variant="plain" aria-label="Benachrichtigungen: 7">
  <IconNotification />
  <CounterBadge count={7} />
</Button>

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.

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.