mittwald Flow Logo

Components

Alert

Ein Alert macht den User auf eine wichtige Information aufmerksam. Er ist visuell hervorgehoben und sollte nur bei relevanten, nicht ignorierbaren Inhalten verwendet werden.GitHub

Playground

Verwende <Alert />, um einen Alert darzustellen.

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

<Alert>
  <Heading>E-Mail-Adresse wurde archiviert</Heading>
</Alert>

Mit Inhalt

Der Text eines Alerts sollte klar, prägnant und handlungsorientiert formuliert sein. Er erklärt dem User, was passiert ist, warum es relevant ist und was als Nächstes zu tun ist. Wenn möglich, biete dem User eine Möglichkeit, sein Problem zu lösen – verwende dazu einen Button oder Link.

import {
  Alert,
  Button,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Alert>
  <Heading>E-Mail-Adresse wurde archiviert</Heading>
  <Content>
    Da deine Domain gelöscht wurde, wurde diese
    E-Mail-Adresse archiviert. Um E-Mails empfangen und
    senden zu können musst du die Adresse wieder umbenennen.
    <Button>E-Mail-Adresse anpassen</Button>
  </Content>
</Alert>

Status

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

import {
  Alert,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Row>
  <Alert status="info">
    <Heading>E-Mail-Adresse wurde archiviert</Heading>
    <Content>
      Da deine Domain gelöscht wurde, wurde diese
      E-Mail-Adresse archiviert. Um E-Mails empfangen und
      senden zu können musst du die Adresse wieder
      umbenennen.
    </Content>
  </Alert>

  <Alert status="warning">
    <Heading>Dein Speicher ist fast voll</Heading>
    <Content>
      Dein Speicher ist zu über 80% belegt. Wir empfehlen
      dir deinen Speicherplatz zu erweitern, um Problemen
      vorzubeugen.
    </Content>
  </Alert>

  <Alert status="danger">
    <Heading>
      Es konnte kein SSL-Zertifikat ausgestellt werden
    </Heading>
    <Content>
      Für diese Domain konnte kein SSL-Zertifikat
      ausgestellt werden, da die Domain per IP nicht auf
      deine Server-IP zeigt.
    </Content>
  </Alert>

  <Alert status="success">
    <Heading>Deine App wurde aktualisiert</Heading>
    <Content>
      Deine App wurde erfolgreich auf die neueste Version
      aktualisiert.
    </Content>
  </Alert>
</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