# Bestätigen

```tsx
import {
  Action,
  ActionGroup,
  Button,
  Content,
  Heading,
  Modal,
  ModalTrigger,
  Text,
} from "@mittwald/flow-react-components";

export default () => (
  <ModalTrigger>
    <Button color="danger" variant="solid">
      E-Mail-Adresse löschen
    </Button>
    <Modal>
      <Heading>E-Mail-Adresse löschen</Heading>
      <Content>
        <Text>
          Die E-Mail-Adresse <b>max@mustermann.de</b> und
          alle darin gespeicherten E-Mails werden gelöscht.
          Das lässt sich nicht rückgängig machen. Die
          Weiterleitung von <b>kontakt@mustermann.de</b> auf
          diese Adresse geht danach ins Leere.
        </Text>
      </Content>
      <ActionGroup>
        <Action closeModal>
          <Button color="danger">Löschen</Button>
          <Button variant="soft" color="secondary">
            Abbrechen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>
)
```

---

# Verwendung

Verwende dieses Overlay, wenn eine Aktion Daten unwiederbringlich entfernt,
etwas Kostenpflichtiges beendet oder weitere Objekte betrifft – etwa löschen,
kündigen oder eine Verknüpfung auflösen. Der Sinn dieses Overlays ist, den
Workflow bewusst zu unterbrechen und den Nutzer auf die Tragweite der Aktion
aufmerksam zu machen. Lässt sich eine Aktion dagegen sofort und mit geringem
Aufwand rückgängig machen, wirkt eine Rückfrage schnell lästig und das Overlay
ist verzichtbar.

---

# Aufbau

- **Overlay-Container** – Ein [Modal](https://flow.mittwald.de/components/overlays/modal) erscheint
  mittig und ist so groß wie sein Inhalt. Meist ist das Modal die richtige Wahl,
  da es um eine kurze Rückfrage geht; werden viele abhängige Objekte
  aufgelistet, die mitgelöscht werden, kann die `offCanvas`-Variante sinnvoll
  sein.
- **Überschrift und Folgen** – Die Überschrift ist kurz und prägnant. Ein
  [Text](https://flow.mittwald.de/components/content/text) darunter klärt den Nutzer verständlich über
  die Folgen der Aktion auf. Wichtige Informationen (z. B. das zu löschende
  Objekt) können mit **Fettschrift** hervorgehoben werden. Betrifft die Aktion
  weitere Objekte, werden sie hier genannt.
- **Aktionen** – Eine [ActionGroup](https://flow.mittwald.de/components/actions/action-group) trägt die
  bestätigende Aktion mit der Aktion als Verb, daneben ein zurückhaltendes
  „Abbrechen". Je nach Konsequenz nutzt die bestätigende Aktion einen
  [Button](https://flow.mittwald.de/components/actions/button) in `color="success"` oder
  `color="danger"`, um die Folge zu verdeutlichen.

---

# Varianten und Abwandlung

## Mit Eingabe der Bestätigung

Bei besonders folgenreichen Aktionen, etwa dem Löschen des eigenen Profils,
tippt der Nutzer den Namen des Objekts ab, bevor der Button aktiv wird.

```tsx
import {
  Action,
  ActionGroup,
  Button,
  Content,
  FieldDescription,
  Flex,
  Heading,
  Label,
  Modal,
  ModalTrigger,
  Text,
  TextField,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const profileName = "Max Mustermann";
  const [confirmation, setConfirmation] = useState("");

  return (
    <ModalTrigger>
      <Button color="danger" variant="solid">
        Profil löschen
      </Button>
      <Modal>
        <Heading>Profil löschen</Heading>
        <Content>
          <Flex direction="column" gap="m">
            <Text>
              Das Profil <b>{profileName}</b> wird mit allen
              zugehörigen Daten und Zugriffsrechten
              gelöscht. Das lässt sich nicht rückgängig
              machen.
            </Text>
            <TextField
              value={confirmation}
              onChange={setConfirmation}
              isRequired
            >
              <Label>Namen eingeben</Label>
              <FieldDescription>
                Tippe <b>{profileName}</b> ab, um das
                Löschen zu bestätigen.
              </FieldDescription>
            </TextField>
          </Flex>
        </Content>
        <ActionGroup>
          <Action closeModal>
            <Button
              color="danger"
              isDisabled={confirmation !== profileName}
            >
              Profil löschen
            </Button>
            <Button variant="soft" color="secondary">
              Abbrechen
            </Button>
          </Action>
        </ActionGroup>
      </Modal>
    </ModalTrigger>
  );
}
```