CounterBadge

Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin.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