‍

Components

Integrations

Notification

Die Notification informiert User über wichtige System- oder Statusmeldungen.
GitHub‍Markdown‍
import {
  Heading,
  Notification,
  Text,
} from "@mittwald/flow-react-components";

<Notification>
  <Heading>E-Mail-Adresse archiviert</Heading>
  <Text>
    Die E-Mail-Adresse <strong>example@mittwald.de</strong>{" "}
    wurde archiviert.
  </Text>
</Notification>

Best Practices

  • Kommuniziere nur relevante und wichtige Informationen. Das vermeidet eine Informationsüberlastung.
  • Formuliere die Meldung kurz, klar und verständlich, als Faustregel in höchstens zwölf Wörtern.
  • Halte Notifications gesammelt und später abrufbar.

Status

Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:

  • Info – Allgemeine Systemzustände oder laufende Prozesse, die keine Aktion erfordern.
  • Warning – Hinweise auf mögliche Risiken mit einer klaren Handlungsempfehlung.
  • Danger – Akute Fehlerzustände oder kritische Probleme, die sofortige Aufmerksamkeit erfordern.
  • Success – Abgeschlossene, erfolgreiche oder positiv bewertete Zustände.
  • Unavailable – Zustände aufgrund von nicht verfügbaren oder gelöschten Inhalten.

Properties

PropertyTypeDefaultDescription
autoCloseboolean-Whether the notification should disappear automatically after some time.
hrefstring-A link that is triggered when clicking the notification.
status"info" | "success" | "warning" | "danger" | "unavailable"-The elements status

Events

PropertyTypeDefaultDescription
onClick(() => void)-Handler that is called when the notification is clicked.
onClose(() => void)-Handler that is called when the close button of the notification is clicked.

Accessibility

PropertyTypeDefaultDescription
aria-describedbystring-Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hiddenBooleanish-Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-labelstring-Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledbystring-Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite