# IllustratedMessage

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

```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>
```

---

# Best Practices

- Wähle ein [Icon](https://flow.mittwald.de/04-components/content/icon), das zum Kontext passt.
- Beschreibe im Text klar, warum der Zustand leer ist und was als Nächstes zu
  tun ist.
- Unterstütze Handlungsaufforderungen mit interaktiven Elementen wie
  [Buttons](https://flow.mittwald.de/04-components/actions/button) oder
  [Links](https://flow.mittwald.de/04-components/navigation/link).

---

# 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](https://flow.mittwald.de/04-components/status/alert) 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, wenn die Standard-Colors auf farbigen oder
dekorativen Hintergründen nicht gut funktionieren. Wann welche Color passt,
beschreibt [Color](https://flow.mittwald.de/02-foundations/01-design/02-colors#light-und-dark-color).

```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>
```

---

# Kombiniere mit ...

## ActionGroup

Wenn mehr als eine Action benötigt wird, kann die IllustratedMessage auch mit
einer [ActionGroup](https://flow.mittwald.de/04-components/actions/action-group) 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>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `"default" \| "dark" \| "light" \| "dark-static" \| "light-static" \| "danger" \| "unavailable"` | `"default"` | The color of the illustrated message. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |