mittwald Flow Logo

Components

Notification

Die Notification informiert die User über wichtige System- oder Statusmeldungen. Sie sollte sparsam eingesetzt werden, um die Aufmerksamkeit des Users zu erhalten.GitHub

Playground

Verwende <Notification />, um eine Notification darzustellen. Um eine Notification auszulösen und sie zu steuern, kann der NotificationProvider genutzt werden.

import {
  Heading,
  Notification,
  Text,
} from "@mittwald/flow-react-components";

<Notification>
  <Heading>E-Mail-Adresse archiviert</Heading>
  <Text>
    Die E-Mail-Adresse <b>example@mittwald.de</b> wurde
    archiviert.
  </Text>
</Notification>

Status

Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: Info, Warning, Danger und Success.

import {
  Heading,
  Notification,
  Text,
} from "@mittwald/flow-react-components";

<Row>
  <Notification status="info">
    <Heading>E-Mail-Adresse archiviert</Heading>
    <Text>
      Die E-Mail-Adresse <b>example@mittwald.de</b> wurde
      archiviert.
    </Text>
  </Notification>

  <Notification status="warning">
    <Heading>Speicher fast voll</Heading>
    <Text>
      Der Speicherplatz im Projekt <b>My Project</b> ist zu
      80% voll.
    </Text>
  </Notification>

  <Notification status="danger">
    <Heading>Kein SSL-Zertifikat</Heading>
    <Text>
      Für <b>example.de</b> konnte kein SSL-Zertifikat
      ausgestellt werden.
    </Text>
  </Notification>

  <Notification status="success">
    <Heading>App installiert</Heading>
    <Text>
      Deine App <b>My WordPress</b> wurde erfolgreich
      installiert.
    </Text>
  </Notification>
</Row>

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.

Overview