An illustrated message display an image and a message, usually for an empty state or an error page.
<IllustratedMessage> <Image /> /* (Required) The image of the illustrated message */ <Heading /> /* (Optional) The heading of the illustrated message */ <Content /> /* (Optional) The content of the illustrated message */ <ButtonGroup> /* (Optional) The button group of the illustrated message */ <Button /> </ButtonGroup> <Button /> /* (Optional) The button of the illustrated message */ </IllustratedMessage>
A IllustratedMessage uses the following components:
An illustrated message can use different sizes.
An illustrated message can handle images (jpg, png).
An illustrated message can handle either a button
or a group of buttons
An illustrated message can handle svgs.
To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in Orbiter.
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
The element's unique identifier. See MDN.
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.