# Anzeigen

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

export default () => {
  const log = `[2026-08-10 03:00:01] INFO  cron: starting job "backup-database"
[2026-08-10 03:00:01] INFO  backup: connecting to database "app_production"
[2026-08-10 03:00:02] INFO  backup: dumping database "app_production"
[2026-08-10 03:00:09] INFO  backup: 42 tables dumped, 1.284.902 rows total
[2026-08-10 03:00:14] INFO  backup: 248.6 MB written to /backups/2026-08-10.sql.gz
[2026-08-10 03:00:14] INFO  backup: verifying checksum sha256:9f2b…c41e
[2026-08-10 03:00:15] INFO  backup: upload to offsite storage "eu-central" started
[2026-08-10 03:00:22] INFO  backup: upload finished in 7.4s
[2026-08-10 03:00:22] WARN  backup: retention exceeded, removing /backups/2026-07-27.sql.gz
[2026-08-10 03:00:23] INFO  backup: 30 snapshots retained, oldest 2026-07-11
[2026-08-10 03:00:23] INFO  cron: job "backup-database" finished with exit code 0`;

  return (
    <ModalTrigger>
      <Button variant="soft" color="secondary">
        Log anzeigen
      </Button>
      <Modal size="m" offCanvas>
        <Heading>
          Cronjob „backup-database" – Durchlauf vom
          10.08.2026
        </Heading>
        <Content>
          <CodeBlock language="log" code={log} copyable />
        </Content>
        <ActionGroup>
          <Action closeModal>
            <Button variant="soft" color="secondary">
              Schließen
            </Button>
          </Action>
        </ActionGroup>
      </Modal>
    </ModalTrigger>
  );
}
```

---

# Verwendung

Verwende dieses Overlay für Inhalte, die zu einem Objekt gehören, die Seite aber
sprengen würden und aus denen keine weitere Aktion folgt: Details, Protokolle,
Vorschauen oder Belege. Wird etwas eingegeben, nimm ein Overlay zum
[Anlegen & Bearbeiten](https://flow.mittwald.de/templates/overlays/anlegen-bearbeiten); ist eine
Entscheidung zu treffen, eines zum
[Bestätigen](https://flow.mittwald.de/templates/overlays/bestaetigen). Was jeder Besucher dauerhaft
sehen soll, gehört fest auf die [Detailseite](https://flow.mittwald.de/templates/seiten/detailseite).

---

# Aufbau

- **Overlay-Container** – Bei wenig Inhalt eignet sich ein
  [Modal](https://flow.mittwald.de/components/overlays/modal), das mittig erscheint; bei viel Inhalt mit
  erwartetem Scrollen – etwa ein Log oder eine lange Liste – bietet sich die
  `offCanvas`-Variante an, die für sich scrollt.
- **Überschrift** – Eine [Heading](https://flow.mittwald.de/components/content/heading) benennt kurz das
  gezeigte Objekt.
- **Content** – Der Inhalt lässt sich mit
  [Sections](https://flow.mittwald.de/components/structure/section) und einem
  [ColumnLayout](https://flow.mittwald.de/components/structure/column-layout) übersichtlich
  strukturieren. Werte, die weiterverwendet werden, erhalten einen
  [CopyButton](https://flow.mittwald.de/components/actions/copy-button); das Overlay ist oft der einzige
  Ort, an dem ein Wert vollständig steht.
- **Aktion** – Eine [ActionGroup](https://flow.mittwald.de/components/actions/action-group) trägt als
  einzige Aktion „Schließen".

---

# Varianten und Abwandlung

## Einmal-Anzeige eines Geheimnisses

Ein Sonderfall, in dem das Overlay nach dem Anlegen erscheint: Das Ergebnis
enthält einen Wert, der später nicht erneut abrufbar ist – ein API-Token,
Recovery-Codes oder ein Auth-Code. Der Warnhinweis steht vor dem Wert, damit vor
dem Schließen klar ist, dass es keine zweite Gelegenheit gibt.

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

export default () => (
  <ModalTrigger>
    <Button>Geheimnis anzeigen</Button>
    <Modal>
      <Heading>API-Token kopieren</Heading>
      <Content>
        <Section>
          <Text>
            Dein persönlicher Token wird dir{" "}
            <b>nur einmalig</b> angezeigt. Speichere ihn an
            einem sicheren Ort ab.
          </Text>
          <LabeledValue>
            <Label>API-Token</Label>
            <InlineCode>
              0664f2ab-9556-4a96-a95c-ea72800f379c
            </InlineCode>
            <CopyButton text="0664f2ab-9556-4a96-a95c-ea72800f379c" />
          </LabeledValue>
        </Section>
      </Content>
      <ActionGroup>
        <Action closeModal>
          <Button variant="soft" color="secondary">
            Schließen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>
)
```

## IllustratedMessage

Eine [IllustratedMessage](https://flow.mittwald.de/components/content/illustrated-message) wird
verwendet, wenn eine Botschaft im Modal besonders hervorgehoben werden soll. Sie
eignet sich vor allem für wichtige Zustände wie
[Fehler](https://flow.mittwald.de/foundations/content-guidelines/error-handling#fehler-beim-durchfuhren-von-aktionen-fehler-bei-serverseitigen-aktionen),
leere Inhalte oder abgeschlossene Aktionen und macht diese visuell schnell
erfassbar.

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

export default () => (
  <ModalTrigger>
    <Button color="danger" variant="solid">
      E-Mail-Adresse löschen
    </Button>
    <Modal>
      <Content>
        <IllustratedMessage color="danger">
          <IconDanger />
          <Heading>Löschen fehlgeschlagen</Heading>
          <Text>
            Die E-Mail-Adresse konnte nicht gelöscht werden.
            Wir arbeiten daran, das Problem zu beheben.
            Bitte versuche es später noch einmal.
          </Text>
        </IllustratedMessage>
      </Content>
      <ActionGroup>
        <Action closeModal>
          <Button variant="soft" color="secondary">
            Schließen
          </Button>
        </Action>
      </ActionGroup>
    </Modal>
  </ModalTrigger>
)
```