components

Illustration

Illustration renders large, decorative SVG graphics used in empty states, error pages, and feature placeholders. The illustration prop accepts a name from the built-in set of 11 illustrations. Available illustration names: resources, noResults, noMessages, templateDeleted, noOptimizationSchedules, noData, tags, templateMissing, noResultsDateRange, emptyTable, connectionError. Always provide altTitle and altDescription for accessibility, describing the illustration's purpose in context.

Import

import { Illustration } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Display empty states with a visual cue.
+Communicate 'no data' or 'no results' states.
+Provide visual feedback for error or missing content scenarios.

When not to use

−For decorative images — use img elements.
−For icons — use the Icon component.
−For status indicators — use Alert.

Examples

Code Samples

Empty State Illustrations

Common empty state illustrations used when a view has no content to display.

import { Illustration } from "@skedulo/breeze-ui-react";

export default function EmptyStates() {
  return (
    <div className="flex gap-8 flex-wrap">
      <div className="text-center">
        <Illustration illustration="noResults" altTitle="No results" />
        <p className="text-sm text-gray-500 mt-2">noResults</p>
      </div>
      <div className="text-center">
        <Illustration illustration="emptyTable" altTitle="Empty table" />
        <p className="text-sm text-gray-500 mt-2">emptyTable</p>
      </div>
      <div className="text-center">
        <Illustration illustration="noData" altTitle="No data" />
        <p className="text-sm text-gray-500 mt-2">noData</p>
      </div>
    </div>
  );
}

Error and Status Illustrations

Illustrations for error states and system messages.

import { Illustration } from "@skedulo/breeze-ui-react";

export default function ErrorIllustrations() {
  return (
    <div className="flex gap-8 flex-wrap">
      <div className="text-center">
        <Illustration illustration="connectionError" altTitle="Connection error" />
        <p className="text-sm text-gray-500 mt-2">connectionError</p>
      </div>
      <div className="text-center">
        <Illustration illustration="templateMissing" altTitle="Template missing" />
        <p className="text-sm text-gray-500 mt-2">templateMissing</p>
      </div>
    </div>
  );
}

Guidelines

Do

✓Always provide altTitle and altDescription for accessibility.
✓Pair illustrations with explanatory text.
✓Use the appropriate illustration for the context.

Don't

✗Don't use illustrations as primary content.
✗Don't use multiple illustrations on the same page.

API Reference

Prop	Type	Default	Description
illustration*	string	—	Name of the illustration to render (e.g. 'noResults', 'emptyTable', 'connectionError').
altTitle	string	—	Accessible title for the illustration SVG.
altDescription	string	—	Accessible description for the illustration SVG.

Related Components

Alert Card