CounterBadge

Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.GitHub

Beispiel

import CounterBadge from "@mittwald/flow-react-components/CounterBadge";

<CounterBadge count={5} />

Ohne Inhalt

import CounterBadge from "@mittwald/flow-react-components/CounterBadge";

<CounterBadge />

Hohe Zahlen

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

import CounterBadge from "@mittwald/flow-react-components/CounterBadge";

<CounterBadge count={120} />

Innerhalb eines Buttons

Um sich bei der Verwendung auf anderen Elementen besser von diesen abzuheben, hat das CounterBadge eine Border. Diese ist im Default weiß und muss jeweils an die Hintergrundfarbe angepasst werden.

Accessibility

Da das CounterBadge selbst nicht accessible ist, muss der Wert über das darunterliegende Element vermittelt werden, in diesem Beispiel erhält der Button ein Aria Label, das die Zahl des Counters enthält.

import Button from "@mittwald/flow-react-components/Button";
import { IconNotification } from "@mittwald/flow-react-components/Icons";
import CounterBadge from "@mittwald/flow-react-components/CounterBadge";

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

Feedback geben