mittwald Flow Logo

Components

CounterBadge

Ein CounterBadge dient dazu, dem User schnell und kompakt auf neue oder ungelesene Inhalte hinzuweisen.GitHub

Playground

Verwende <CounterBadge />, um ein CounterBadge darzustellen.

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

<CounterBadge count={5} />

Ohne Inhalt

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

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

<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 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,
  CounterBadge,
  IconNotification,
} from "@mittwald/flow-react-components";

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

Overview