IllustratedMessage

An IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.

size

orientation

import {IllustratedMessage, Heading, Content, Button, ButtonGroup} from '@react-spectrum/s2';
import Image from '@react-spectrum/s2/illustrations/gradient/generic1/Image';

<IllustratedMessage>
  <Image />
  <Heading>Create your first asset.</Heading>
  <Content>Get started by uploading or importing some assets.</Content>
  <ButtonGroup>
    <Button variant="secondary">Import</Button>
    <Button variant="accent">Upload</Button>
  </ButtonGroup>
</IllustratedMessage>

API

<IllustratedMessage>
  <Illustration />
  <Heading />
  <Content />
  <ButtonGroup />
</IllustratedMessage>

IllustratedMessage

Name	Type	Default
`styles`	`StylesPropWithHeight`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`children`	`ReactNode`	Default: —
The content to display in the IllustratedMessage.
`size`	`'S' \| 'M' \| 'L'`	Default: `'M'`
The size of the IllustratedMessage.
`orientation`	`'horizontal' \| 'vertical'`	Default: `'vertical'`
The direction that the IllustratedMessage should be laid out in.