Illustration

Use illustrations in product UI, paired with inline text in empty states, onboarding, and announcements. Spot illustrations are retired from brand and marketing work; use Resolve graphics there instead.

Usage #

Pass the illustration's name in kebab-case. Each name in the catalog below is a valid value.

<dt-illustration name="access-denied" />

Catalog #

Vue API #

import { DtIllustration } from '@dialpad/dialtone-vue';

Props

Accessibility #

• Illustrations are decorative by default. Without an aria-label, they render with aria-hidden="true", so screen readers skip them.
• Add an aria-label only when the illustration carries meaning that the surrounding text doesn't, for example <dt-illustration name="access-denied" aria-label="Access denied" />.
• Don't rely on an illustration alone to communicate. Pair it with a heading and body text, as in Empty State.