CounterBadge

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

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.

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

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

Auf dieser Seite