Preview Only: These components are for reference only. Continue using Orbiter in production until further notice.

IllustratedMessage

An illustrated message display an image and a message, usually for an empty state or an error page.

Anatomy

Composed Components

A IllustratedMessage uses the following components:

Usage

Sizes

An illustrated message can use different sizes.

Image

An illustrated message can handle images (jpg, png).

Buttons

An illustrated message can handle either a button

or a group of buttons

SVG

An illustrated message can handle svgs.

Props

size?

The size of the IllustratedMessage.

Defaults to md.
children?

The children of the component.

className?

The CSS className for the element.

style?

The inline style for the element.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • orientation has been removed. Refer to this sample to see an implementation example for a horizontal orientation.
  • width and height prop will now affect the whole wrapper instead of just the image.

Layout Samples

To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in Orbiter.

Horizontal