# IllustratedMessage

Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.

## Overview

# Playground

Verwende `<IllustratedMessage />`, um einen IllustratedMessage darzustellen. Sie
besteht in der Regel aus `<Icon />`, `<Heading />` und einem `<Text />`. Sie
kann durch einen `<Button />` oder einen `<Link />` ergänzt werden.

```tsx
import {
  Button,
  Heading,
  IconApp,
  IllustratedMessage,
  Text,
} from "@mittwald/flow-react-components";

<IllustratedMessage>
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>
```

---

# Color

## Danger und Unavailable

Bei Fehlern oder unzulässigem Zugriff hilft die IllustratedMessage Usern dabei
zu verstehen, was nicht funktioniert und warum. Zusätzlich kann sie eine
mögliche Lösung anbieten. Im Vergleich zu einem
[Alert](/04-components/status/alert/overview) wirkt sie freundlicher und gleicht
fehlende Inhalte visuell besser aus.

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

<IllustratedMessage color="danger">
  <IconDanger />
  <Heading>Fehler beim Laden von Daten</Heading>
  <Text>
    Dieser Bereich konnte nicht geladen werden. Wir arbeiten
    daran das Problem zu beheben. Bitte habe etwas Geduld
    und probiere es später noch einmal.
  </Text>
  <Button color="secondary" variant="soft">
    Erneut versuchen
  </Button>
</IllustratedMessage>
```

```tsx
import {
  Link,
  Heading,
  IconUnavailable,
  IllustratedMessage,
  Text,
} from "@mittwald/flow-react-components";

<IllustratedMessage color="unavailable">
  <IconUnavailable />
  <Heading>Kein Zugriff</Heading>
  <Text>
    Du hast keine Berechtigung, um auf diese Seite
    zuzugreifen.
  </Text>
  <Link>Zum Dashboard</Link>
</IllustratedMessage>
```

## Light und Dark

Zusätzlich zu den Standard-Colors, kann die IllustratedMessage in **Light** und
**Dark** dargestellt werden. Beide Colors sind Alternativen zu den herkömmlichen
Farben, falls diese nicht auf farbigen oder dekorativen Hintergründen
funktionieren.

```tsx
import {
  Button,
  Heading,
  IconApp,
  IllustratedMessage,
  Text,
} from "@mittwald/flow-react-components";

<IllustratedMessage color="light">
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>
```

```tsx
import {
  Button,
  Heading,
  IconApp,
  IllustratedMessage,
  Text,
} from "@mittwald/flow-react-components";

<IllustratedMessage color="dark">
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>
```

**Light:** Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL
Lightness-Wert von weniger als 50.

**Dark:** Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem
HSL Lightness-Wert von größer als 50.

---

# Kombiniere mit ...

## ActionGroup

Wenn mehr als eine Action benötigt wird, kann die IllustratedMessage auch mit
einer [ActionGroup](/04-components/actions/action-group/overview) kombiniert
werden.

```tsx
import {
  ActionGroup,
  Button,
  Heading,
  IconApp,
  IllustratedMessage,
  Text,
} from "@mittwald/flow-react-components";

<IllustratedMessage>
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <ActionGroup>
    <Button variant="soft" color="secondary">
      Zurück
    </Button>
    <Button>App anlegen</Button>
  </ActionGroup>
</IllustratedMessage>
```