IllustratedMessage

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‍, 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‍ oder Links‍.

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‍ wirkt sie freundlicher und gleicht fehlende Inhalte visuell besser aus.

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‍.

Kombiniere mit ...

ActionGroup

Wenn mehr als eine Action benötigt wird, kann die IllustratedMessage auch mit einer ActionGroup‍ kombiniert werden.

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

Accessibility