IllustratedMessage

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

install	`yarn add @react-spectrum/illustratedmessage`
version	3.1.4
usage	`import {IllustratedMessage} from '@react-spectrum/illustratedmessage'`

View repository

GitHub

View package

NPM

Example#

import NotFound from '@spectrum-icons/illustrations/NotFound';

<IllustratedMessage>
  <NotFound />
  <Heading>No results</Heading>
  <Content>Try another search</Content>
</IllustratedMessage>

import NotFound from '@spectrum-icons/illustrations/NotFound';

<WRAPPER>
  <IllustratedMessage>
    <NotFound />
    <Heading>No results</Heading>
    <Content>Try another search</Content>
  </IllustratedMessage>
</WRAPPER>;

import NotFound from '@spectrum-icons/illustrations/NotFound';

<WRAPPER>
  <IllustratedMessage>
    <NotFound />
    <Heading>
      No results
    </Heading>
    <Content>
      Try another search
    </Content>
  </IllustratedMessage>
</WRAPPER>;

Content#

An IllustratedMessage consists of three areas: an illustration, a title, and a body. Each of these sections can be populated by providing the following components to your IllustratedMessage as children: svg, Heading (title), and Content (body).

import Upload from '@spectrum-icons/illustrations/Upload';

<WRAPPER>
  <IllustratedMessage>
    <Upload />
    <Heading>Drag and Drop your file</Heading>
    <Content>
      Select a File from your computer<br /> or Search Adobe Stock
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Upload from '@spectrum-icons/illustrations/Upload';

<WRAPPER>
  <IllustratedMessage>
    <Upload />
    <Heading>Drag and Drop your file</Heading>
    <Content>
      Select a File from your computer<br />{' '}
      or Search Adobe Stock
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Upload from '@spectrum-icons/illustrations/Upload';

<WRAPPER>
  <IllustratedMessage>
    <Upload />
    <Heading>
      Drag and Drop your
      file
    </Heading>
    <Content>
      Select a File from
      your computer<br />
      {' '}
      or Search Adobe
      Stock
    </Content>
  </IllustratedMessage>
</WRAPPER>;

Accessibility#

When an IllustratedMessage has a svg and a Heading, the svg needs an aria-hidden prop and a role prop set to presentation.

Labeling#

Accessibility#

The title of an IllustratedMessage is typically provided via its Heading. If a Heading isn't specified, the illustration needs an aria-label prop to identify it to assistive technology. If you pass an SVG in yourself, you'll need to ensure that the role prop is set to img as well.

<IllustratedMessage>
  <NotFound aria-label="No results" />
</IllustratedMessage>

<IllustratedMessage>
  <NotFound aria-label="No results" />
</IllustratedMessage>

<WRAPPER>
  <IllustratedMessage>
    <NotFound aria-label="No results" />
  </IllustratedMessage>
</WRAPPER>;

Props#

Name	Type	Default	Description
`children`	`ReactNode`	—	The contents of the IllustratedMessage.

Layout

Name	Type	Default	Description
`flex`	`Responsive<string \| number \| boolean>`	—	When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
`flexGrow`	`Responsive<number>`	—	When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
`flexShrink`	`Responsive<number>`	—	When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
`flexBasis`	`Responsive<number \| string>`	—	When used in a flex layout, specifies the initial main size of the element. See MDN.
`alignSelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'center' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'stretch'>`	—	Overrides the `alignItems` property of a flex or grid container. See MDN.
`justifySelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'>`	—	Specifies how the element is justified inside a flex or grid container. See MDN.
`order`	`Responsive<number>`	—	The layout order for the element within a flex or grid container. See MDN.
`gridArea`	`Responsive<string>`	—	When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
`gridColumn`	`Responsive<string>`	—	When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
`gridRow`	`Responsive<string>`	—	When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
`gridColumnStart`	`Responsive<string>`	—	When used in a grid layout, specifies the starting column to span within the grid. See MDN.
`gridColumnEnd`	`Responsive<string>`	—	When used in a grid layout, specifies the ending column to span within the grid. See MDN.
`gridRowStart`	`Responsive<string>`	—	When used in a grid layout, specifies the starting row to span within the grid. See MDN.
`gridRowEnd`	`Responsive<string>`	—	When used in a grid layout, specifies the ending row to span within the grid. See MDN.

Spacing

Name	Type	Default	Description
`margin`	`Responsive<DimensionValue>`	—	The margin for all four sides of the element. See MDN.
`marginTop`	`Responsive<DimensionValue>`	—	The margin for the top side of the element. See MDN.
`marginBottom`	`Responsive<DimensionValue>`	—	The margin for the bottom side of the element. See MDN.
`marginStart`	`Responsive<DimensionValue>`	—	The margin for the logical start side of the element, depending on layout direction. See MDN.
`marginEnd`	`Responsive<DimensionValue>`	—	The margin for the logical end side of an element, depending on layout direction. See MDN.
`marginX`	`Responsive<DimensionValue>`	—	The margin for both the left and right sides of the element. See MDN.
`marginY`	`Responsive<DimensionValue>`	—	The margin for both the top and bottom sides of the element. See MDN.

Sizing

Name	Type	Default	Description
`width`	`Responsive<DimensionValue>`	—	The width of the element. See MDN.
`minWidth`	`Responsive<DimensionValue>`	—	The minimum width of the element. See MDN.
`maxWidth`	`Responsive<DimensionValue>`	—	The maximum width of the element. See MDN.
`height`	`Responsive<DimensionValue>`	—	The height of the element. See MDN.
`minHeight`	`Responsive<DimensionValue>`	—	The minimum height of the element. See MDN.
`maxHeight`	`Responsive<DimensionValue>`	—	The maximum height of the element. See MDN.

Positioning

Name	Type	Default	Description
`position`	`Responsive<'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'>`	—	Specifies how the element is positioned. See MDN.
`top`	`Responsive<DimensionValue>`	—	The top position for the element. See MDN.
`bottom`	`Responsive<DimensionValue>`	—	The bottom position for the element. See MDN.
`left`	`Responsive<DimensionValue>`	—	The left position for the element. See MDN. Consider using `start` instead for RTL support.
`right`	`Responsive<DimensionValue>`	—	The right position for the element. See MDN. Consider using `start` instead for RTL support.
`start`	`Responsive<DimensionValue>`	—	The logical start position for the element, depending on layout direction. See MDN.
`end`	`Responsive<DimensionValue>`	—	The logical end position for the element, depending on layout direction. See MDN.
`zIndex`	`Responsive<number>`	—	The stacking order for the element. See MDN.
`isHidden`	`Responsive<boolean>`	—	Hides the element.

Accessibility

Name	Type	Default	Description
`id`	`string`	—	The element's unique identifier. See MDN.

Advanced

Name	Type	Default	Description
`UNSAFE_className`	`string`	—	Sets the CSS className for the element. Only use as a last resort. Use style props instead.
`UNSAFE_style`	`CSSProperties`	—	Sets inline style for the element. Only use as a last resort. Use style props instead.

Example illustrations#

The below examples make use of illustrations included in the @spectrum-icons/illustrations package.

No search results#

import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';

<IllustratedMessage>
  <NoSearchResults />
  <Heading>No matching results</Heading>
  <Content>Try another search.</Content>
</IllustratedMessage>

import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';

<WRAPPER>
  <IllustratedMessage>
    <NoSearchResults />
    <Heading>No matching results</Heading>
    <Content>Try another search.</Content>
  </IllustratedMessage>
</WRAPPER>;

import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';

<WRAPPER>
  <IllustratedMessage>
    <NoSearchResults />
    <Heading>
      No matching results
    </Heading>
    <Content>
      Try another search.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

403 Forbidden#

import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

<WRAPPER>
  <IllustratedMessage>
    <Unauthorized />
    <Heading>Error 403: Access not allowed</Heading>
    <Content>
      You do not have permission to access this page. Try checking the URL or
      visit a different page.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

<WRAPPER>
  <IllustratedMessage>
    <Unauthorized />
    <Heading>Error 403: Access not allowed</Heading>
    <Content>
      You do not have permission to access this page. Try
      checking the URL or visit a different page.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

<WRAPPER>
  <IllustratedMessage>
    <Unauthorized />
    <Heading>
      Error 403: Access
      not allowed
    </Heading>
    <Content>
      You do not have
      permission to
      access this page.
      Try checking the
      URL or visit a
      different page.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

404 Not found#

<WRAPPER>
  <IllustratedMessage>
    <NotFound />
    <Heading>Error 404: Page not found</Heading>
    <Content>
      This page isn't available. Try checking the URL or visit a different page.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

<WRAPPER>
  <IllustratedMessage>
    <NotFound />
    <Heading>Error 404: Page not found</Heading>
    <Content>
      This page isn't available. Try checking the URL or
      visit a different page.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

<WRAPPER>
  <IllustratedMessage>
    <NotFound />
    <Heading>
      Error 404: Page not
      found
    </Heading>
    <Content>
      This page isn't
      available. Try
      checking the URL or
      visit a different
      page.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

500 Internal server error#

import Error from '@spectrum-icons/illustrations/Error';

<IllustratedMessage>
  <Error />
  <Heading>Error 500: Internal server error</Heading>
  <Content>Something went wrong. Please try again later.</Content>
</IllustratedMessage>

import Error from '@spectrum-icons/illustrations/Error';

<WRAPPER>
  <IllustratedMessage>
    <Error />
    <Heading>Error 500: Internal server error</Heading>
    <Content>
      Something went wrong. Please try again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Error from '@spectrum-icons/illustrations/Error';

<WRAPPER>
  <IllustratedMessage>
    <Error />
    <Heading>
      Error 500: Internal
      server error
    </Heading>
    <Content>
      Something went
      wrong. Please try
      again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

503 Service unavailable#

import Unavailable from '@spectrum-icons/illustrations/Unavailable';

<WRAPPER>
  <IllustratedMessage>
    <Unavailable />
    <Heading>Error 503: Service unavailable</Heading>
    <Content>
      This page isn't working. Try a different page or try again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Unavailable from '@spectrum-icons/illustrations/Unavailable';

<WRAPPER>
  <IllustratedMessage>
    <Unavailable />
    <Heading>Error 503: Service unavailable</Heading>
    <Content>
      This page isn't working. Try a different page or try
      again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Unavailable from '@spectrum-icons/illustrations/Unavailable';

<WRAPPER>
  <IllustratedMessage>
    <Unavailable />
    <Heading>
      Error 503: Service
      unavailable
    </Heading>
    <Content>
      This page isn't
      working. Try a
      different page or
      try again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

504 Gateway timeout#

import Timeout from '@spectrum-icons/illustrations/Timeout';

<IllustratedMessage>
  <Timeout />
  <Heading>Error 504: Server timeout</Heading>
  <Content>The server took too long. Please try again later.</Content>
</IllustratedMessage>

import Timeout from '@spectrum-icons/illustrations/Timeout';

<WRAPPER>
  <IllustratedMessage>
    <Timeout />
    <Heading>Error 504: Server timeout</Heading>
    <Content>
      The server took too long. Please try again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;

import Timeout from '@spectrum-icons/illustrations/Timeout';

<WRAPPER>
  <IllustratedMessage>
    <Timeout />
    <Heading>
      Error 504: Server
      timeout
    </Heading>
    <Content>
      The server took too
      long. Please try
      again later.
    </Content>
  </IllustratedMessage>
</WRAPPER>;