CounterBadge

Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin.

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

<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.

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 auf anderen Elementen besser abzuheben, hat das CounterBadge eine Border. Deren Farbe sollte 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>

Properties

Property	Type	Default	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.

Accessibility

Property	Type	Default	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.

Components

Integrations