IllustratedMessage

Grundlagen

Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann. Sie bietet eine Kombination aus Icon, einer Heading und einer unterstützenden Beschreibung. Optional kann sie durch interaktive Elemente wie Buttons oder Links ergänzt werden. Ziel ist es, leere Seiten visuell aufzulockern und dem User kontextbezogene Hinweise zu geben, wie er fortfahren kann.

Best Practices

Achte bei der Verwendung einer IllustratedMessage darauf, dass ...

• das Icon zum Kontext der Seite passt und nicht ablenkt.
• der Text klar beschreibt, warum der Zustand leer ist und was als Nächstes zu tun ist.
• Handlungsaufforderungen mit interaktiven Elementen wie Buttons oder Links unterstützt werden.

Verwendung

Verwende eine IllustratedMessage, um ...

• dem User visuelles und inhaltliches Feedback zu geben, wenn keine Daten vorhanden sind.
• Vorschläge oder Handlungsoptionen aufzuzeigen, die dem User helfen, Inhalte zu erstellen oder zu entdecken.
• gesperrte Bereiche freundlich und verständlich zu gestalten, um zum Beispiel Wartezeiten zu überbrücken.

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.

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 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. Beide Colors sind Alternativen zu den herkömmlichen Farben, falls diese nicht auf farbigen oder dekorativen Hintergründen funktionieren.

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

Events

Accessibility