Modal

Ein Modal zeigt Inhalte zentriert als Overlay über der Hauptseite an, wodurch der Nutzer sich voll auf den Inhalt des Modals konzentrieren kann.GitHub

Playground

Verwende <Modal />, um ein Modal darzustellen. Da ein Modal in der Regel nur durch eine Aktion des Nutzers erscheint, wird ein <ModalTrigger /> in Kombination z. B. einem <Button /> benötigt.

import Modal, {
  ModalTrigger,
} from "@mittwald/flow-react-components/Modal";
import Content from "@mittwald/flow-react-components/Content";
import Text from "@mittwald/flow-react-components/Text";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";
import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
import Button from "@mittwald/flow-react-components/Button";
import Heading from "@mittwald/flow-react-components/Heading";
import Action from "@mittwald/flow-react-components/Action";
import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
import Section from "@mittwald/flow-react-components/Section";

<ModalTrigger>
  <Button>Modal öffnen</Button>
  <Modal>
    <Heading>Organisation anlegen</Heading>
    <Content>
      <Section>
        <Text>
          Eine Organisation kannst du dir wie ein
          Unternehmen vorstellen. An diesem Ort verwaltest
          du deine Mitarbeiter, Zahlungsmodalitäten und
          kannst deine Rechnungen einsehen.
        </Text>
        <TextField isRequired>
          <Label>Organisationsname</Label>
        </TextField>
      </Section>
    </Content>
    <ActionGroup>
      <Action closeOverlay="Modal">
        <Action action={sleepLong}>
          <Button color="accent">
            Organisation anlegen
          </Button>
        </Action>
        <Button variant="soft" color="secondary">
          Abbrechen
        </Button>
      </Action>
    </ActionGroup>
  </Modal>
</ModalTrigger>

Variants

OffCanvas

Neben der klassischen Darstellung lässt sich das Modal auch als OffCanvas öffnen.

import Modal, {
  ModalTrigger,
} from "@mittwald/flow-react-components/Modal";
import Content from "@mittwald/flow-react-components/Content";
import Text from "@mittwald/flow-react-components/Text";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";
import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
import Button from "@mittwald/flow-react-components/Button";
import Heading from "@mittwald/flow-react-components/Heading";
import Action from "@mittwald/flow-react-components/Action";
import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
import Section from "@mittwald/flow-react-components/Section";

<ModalTrigger>
  <Button>OffCanvas öffnen</Button>
  <Modal offCanvas>
    <Heading>Organisation anlegen</Heading>
    <Content>
      <Section>
        <Text>
          Eine Organisation kannst du dir wie ein
          Unternehmen vorstellen. An diesem Ort verwaltest
          du deine Mitarbeiter, Zahlungsmodalitäten und
          kannst deine Rechnungen einsehen.
        </Text>
        <TextField>
          <Label>Organisationsname</Label>
        </TextField>
      </Section>
    </Content>
    <ActionGroup>
      <Action closeOverlay="Modal">
        <Action action={sleepLong}>
          <Button color="accent">
            Organisation anlegen
          </Button>
        </Action>
        <Button variant="soft" color="secondary">
          Abbrechen
        </Button>
      </Action>
    </ActionGroup>
  </Modal>
</ModalTrigger>

Sizes

Das Modal gibt es in zwei Standardgrößen: S und M. Beide Größen sind sowohl als klassisches Modal als auch in der OffCanvas-Variante verfügbar. In der OffCanvas-Darstellung kannst du außerdem eine individuelle Größe je nach Anwendungsfall festlegen.

import Modal, {
  ModalTrigger,
} from "@mittwald/flow-react-components/Modal";
import Content from "@mittwald/flow-react-components/Content";
import Text from "@mittwald/flow-react-components/Text";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";
import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
import Button from "@mittwald/flow-react-components/Button";
import Heading from "@mittwald/flow-react-components/Heading";
import Action from "@mittwald/flow-react-components/Action";
import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
import Section from "@mittwald/flow-react-components/Section";

<Row>
  <ModalTrigger>
    <Button>Modal S</Button>
    <Modal size="s">
      <Heading>Organisation anlegen</Heading>
      <Content>
        <Section>
          <Text>
            Eine Organisation kannst du dir wie ein
            Unternehmen vorstellen. An diesem Ort verwaltest
            du deine Mitarbeiter, Zahlungsmodalitäten und
            kannst deine Rechnungen einsehen.
          </Text>
          <TextField isRequired>
            <Label>Organisationsname</Label>
          </TextField>
        </Section>
      </Content>
      <ActionGroup>
        <Action closeOverlay="Modal">
          <Action action={sleepLong}>
            <Button color="accent">
              Organisation anlegen
            </Button>
          </Action>
          <Button variant="soft" color="secondary">
            Abbrechen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>

  <ModalTrigger>
    <Button>Modal M</Button>
    <Modal size="m">
      <Heading>Organisation anlegen</Heading>
      <Content>
        <Section>
          <Text>
            Eine Organisation kannst du dir wie ein
            Unternehmen vorstellen. An diesem Ort verwaltest
            du deine Mitarbeiter, Zahlungsmodalitäten und
            kannst deine Rechnungen einsehen.
          </Text>
          <TextField isRequired>
            <Label>Organisationsname</Label>
          </TextField>
        </Section>
      </Content>
      <ActionGroup>
        <Action closeOverlay="Modal">
          <Action action={sleepLong}>
            <Button color="accent">
              Organisation anlegen
            </Button>
          </Action>
          <Button variant="soft" color="secondary">
            Abbrechen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>

  <ModalTrigger>
    <Button>OffCanvas S</Button>
    <Modal size="s" offCanvas>
      <Heading>Organisation anlegen</Heading>
      <Content>
        <Section>
          <Text>
            Eine Organisation kannst du dir wie ein
            Unternehmen vorstellen. An diesem Ort verwaltest
            du deine Mitarbeiter, Zahlungsmodalitäten und
            kannst deine Rechnungen einsehen.
          </Text>
          <TextField isRequired>
            <Label>Organisationsname</Label>
          </TextField>
        </Section>
      </Content>
      <ActionGroup>
        <Action closeOverlay="Modal">
          <Action action={sleepLong}>
            <Button color="accent">
              Organisation anlegen
            </Button>
          </Action>
          <Button variant="soft" color="secondary">
            Abbrechen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>

  <ModalTrigger>
    <Button>OffCanvas M</Button>
    <Modal size="m" offCanvas>
      <Heading>Organisation anlegen</Heading>
      <Content>
        <Section>
          <Text>
            Eine Organisation kannst du dir wie ein
            Unternehmen vorstellen. An diesem Ort verwaltest
            du deine Mitarbeiter, Zahlungsmodalitäten und
            kannst deine Rechnungen einsehen.
          </Text>
          <TextField isRequired>
            <Label>Organisationsname</Label>
          </TextField>
        </Section>
      </Content>
      <ActionGroup>
        <Action closeOverlay="Modal">
          <Action action={sleepLong}>
            <Button color="accent">
              Organisation anlegen
            </Button>
          </Action>
          <Button variant="soft" color="secondary">
            Abbrechen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>
</Row>

Size S: Ein Modal in der Size S (Breite 660 px) wird zum Beispiel für einfache Abfragen, ob etwas gelöscht werden soll, verwendet.

Size M: Ein Modal in der Size M (Breite 900 px) wird für komplexere Dialoge (z.B. Erstellungs-Prozesse mit mehreren Eingabefeldern) verwendet.

Kombiniere mit ...

Controller

Alternativ zum <ModalTrigger /> kann das Modal auch über einen Controller gesteuert werden.

import Modal from "@mittwald/flow-react-components/Modal";
import Content from "@mittwald/flow-react-components/Content";
import Text from "@mittwald/flow-react-components/Text";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";
import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
import Button from "@mittwald/flow-react-components/Button";
import Heading from "@mittwald/flow-react-components/Heading";
import Action from "@mittwald/flow-react-components/Action";
import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
import { useOverlayController } from "@mittwald/flow-react-components/controller";
import Section from "@mittwald/flow-react-components/Section";

export default () => {
  const controller = useOverlayController("Modal");

  return (
    <>
      <Button onPress={controller.open}>
        Modal öffnen
      </Button>

      <Modal controller={controller}>
        <Heading>Organisation anlegen</Heading>
        <Content>
          <Section>
            <Text>
              Eine Organisation kannst du dir wie ein
              Unternehmen vorstellen. An diesem Ort
              verwaltest du deine Mitarbeiter,
              Zahlungsmodalitäten und kannst deine
              Rechnungen einsehen.
            </Text>
            <TextField isRequired>
              <Label>Organisationsname</Label>
            </TextField>
          </Section>
        </Content>
        <ActionGroup>
          <Action closeOverlay="Modal">
            <Action action={sleepLong}>
              <Button color="accent">
                Organisation anlegen
              </Button>
            </Action>
            <Button variant="soft" color="secondary">
              Abbrechen
            </Button>
          </Action>
        </ActionGroup>
      </Modal>
    </>
  );
}

Grundlagen

Best practices

Setze Modals nur ein, wenn sie wirklich notwendig sind. Ein geöffnetes Modal zieht die gesamte Aufmerksamkeit des Nutzers auf sich und lenkt von der restlichen Seite ab.
Stelle umfangreiche Prozesse in einem OffCanvas dar.
Überfordere den Nutzer nicht mit mehr als drei Aktionen im Modal-Footer.
Stelle sicher, dass das Modal leicht zu schließen ist, damit der Nutzer nicht in eine Sackgasse gerät.
Wähle eine verständliche und prägnante Überschrift und halte den restlichen Inhalt leicht verständlich.
Es sollte sich maximal ein weiteres Modal über einem bereits geöffneten Modal öffnen.

Verwendung

Verwende ein Modal, um...

Dialoge zur Abfrage anzuzeigen, z.B. um zu bestätigen, ob etwas wirklich gelöscht werden soll.
Erstellungsprozesse zu ermöglichen, ohne die aktuelle Seite zu verlassen.
Formulare zur Bearbeitung anzuzeigen.

Modal vs. OffCanvas

Modal und OffCanvas erfüllen beide den Zweck, dem Nutzer Informationen in einem Overlay zu vermitteln. Auch technisch sind sie identisch.

Dennoch sollte je nach Anwendungsfall zwischen beiden unterschieden werden, da die unterschiedliche Darstellung verschiedene Vorteile mit sich bringt.

Verwende ein Modal, um z. B. ...

einfache Dialoge wie Abfragen oder kurze Anlege-Prozesse anzuzeigen.
kurze Bearbeitungsmöglichkeiten darzustellen.
Inhalte anzuzeigen, die kein Scrollen erfordern und für die die Breite des Modals ausreicht.

Verwende ein OffCanvas, um z. B. ...

Inhalte anzuzeigen, die nicht gekürzt werden können und ein Scrollen erfordern.
sehr breite Inhalte anzuzeigen.

Inhalt

In den meisten Fällen ist eine ActionGroup im Footer des Modals erforderlich, um Eingaben zu bestätigen oder das Modal zu verlassen.

Beachte bei der Verwendung jedoch, dass manche Inhalte keine Bestätigung erfordern, da ...

manche Modals rein informativen Inhalt enthalten.
einige Inhalte sich unmittelbar selber speichern und zu direkten Änderungen führen (z.B. Einstellungen in einem OffCanvas mittels Switch).
bestimmte Eingaben sich automatisch selber validieren (z.B. 2-FA-Authentifikation) und das Modal schließen.

In diesen Fällen benötigt die ActionGroup keine Hauptaktion.

Manche Eingaben erfordern keine explizite Bestätigung. An diesen Stellen ist es ausreichend, nur einen “Schließen”-Button in der ActionGroup des Modal Footers anzuzeigen.

Writing guidelines

Heading

Beachte bei der Heading folgende Punkte:

Halte Überschriften kurz und verständlich.
Zeichne sie semantisch korrekt aus und halte die Reihenfolge (H2, H3, H4, ...) ein. Die erste Überschrift in einem Modal ist semantisch immer eine H2.
HTML-Semantik und visuelle Darstellung können separat voneinander festgelegt werden.
Beginne Lösch-Prozesse immer mit einer Frage.

E-Mail-Adresse bearbeiten

Projekt wirklich löschen?

Projekt wirklich löschen? - App auswählen

Do

Bearbeite hier deine E-Mail-Adresse

Projektlöschvorgang starten

Wähle hier eine App aus

Don't

Text

Unter der Heading befindet sich oft ein beschreibender Text. Dabei sind folgende Punkte zu beachten:

Setze wichtige Informationen an den Anfang.
Hebe wichtige Informationen in Bold hervor.
Verzichte auf einen passiven Satzbau und formuliere aktiv.

Behavior

Responsive layout

Wenn die Bildschirmgröße weniger als 551 px beträgt, dann füllt das Modal die gesamte Breite des Bildschirms aus und wird am unteren Rand des Bildschirms angezeigt.

Mobile Variante

Schließen eines Modals

Das Schließen eines Modals sollte einfach sein, besonders wenn im Modal nichts Wichtiges vom Nutzer bestätigt werden muss. Es sollte möglich sein, es durch einen Klick außerhalb des Modals oder durch Drücken der "Schließen"- oder "Abbrechen"-Taste oder der Esc-Taste zu schließen.

Feedback geben

Flow

Components