IllustratedMessage

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

installyarn add @react-spectrum/illustratedmessage
version3.1.0
usageimport {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';

<IllustratedMessage>
  <NotFound />
  <Heading>No Results</Heading>
  <Content>Try another search</Content>
</IllustratedMessage>
import NotFound from '@spectrum-icons/illustrations/NotFound';

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

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';

<IllustratedMessage>
  <Upload />
  <Heading>Drag and Drop Your File</Heading>
  <Content>
    Select a File from your computer
    <br /> or Search Adobe Stock
  </Content>
</IllustratedMessage>
import Upload from '@spectrum-icons/illustrations/Upload';

<IllustratedMessage>
  <Upload />
  <Heading>Drag and Drop Your File</Heading>
  <Content>
    Select a File from your computer
    <br /> or Search Adobe Stock
  </Content>
</IllustratedMessage>
import Upload from '@spectrum-icons/illustrations/Upload';

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

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>
<IllustratedMessage>
  <NotFound aria-label="No results" />
</IllustratedMessage>

Props#

NameTypeDefaultDescription
childrenReactNode—The contents of the IllustratedMessage.
Layout
NameTypeDefaultDescription
flexstring | number | boolean—When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrownumber—When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinknumber—When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisnumber | string—When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelf'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'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.
ordernumber—The layout order for the element within a flex or grid container. See MDN.
gridAreastring—When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnstring—When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowstring—When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartstring—When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndstring—When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartstring—When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndstring—When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDefaultDescription
marginDimensionValue—The margin for all four sides of the element. See MDN.
marginTopDimensionValue—The margin for the top side of the element. See MDN.
marginBottomDimensionValue—The margin for the bottom side of the element. See MDN.
marginStartDimensionValue—The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndDimensionValue—The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXDimensionValue—The margin for both the left and right sides of the element. See MDN.
marginYDimensionValue—The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDefaultDescription
widthDimensionValue—The width of the element. See MDN.
minWidthDimensionValue—The minimum width of the element. See MDN.
maxWidthDimensionValue—The maximum width of the element. See MDN.
heightDimensionValue—The height of the element. See MDN.
minHeightDimensionValue—The minimum height of the element. See MDN.
maxHeightDimensionValue—The maximum height of the element. See MDN.
Positioning
NameTypeDefaultDescription
position'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'—Specifies how the element is positioned. See MDN.
topDimensionValue—The top position for the element. See MDN.
bottomDimensionValue—The bottom position for the element. See MDN.
leftDimensionValue—The left position for the element. See MDN. Consider using start instead for RTL support.
rightDimensionValue—The right position for the element. See MDN. Consider using start instead for RTL support.
startDimensionValue—The logical start position for the element, depending on layout direction. See MDN.
endDimensionValue—The logical end position for the element, depending on layout direction. See MDN.
zIndexnumber—The stacking order for the element. See MDN.
isHiddenboolean—Hides the element.
Accessibility
NameTypeDefaultDescription
idstring—The element's unique identifier. See MDN.
Advanced
NameTypeDefaultDescription
UNSAFE_classNamestring—Sets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSProperties—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.

403 Forbidden#

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

<IllustratedMessage>
  <Unauthorized />
  <Heading>Error 403: Access not allowed</Heading>
  <Content>
    You do not permission to this page. Try checking the URL or visit a
    different page.
  </Content>
</IllustratedMessage>
import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

<IllustratedMessage>
  <Unauthorized />
  <Heading>Error 403: Access not allowed</Heading>
  <Content>
    You do not permission to this page. Try checking the
    URL or visit a different page.
  </Content>
</IllustratedMessage>
import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

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

404 Not Found#

<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>
<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>
<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>

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';

<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';

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

503 Service Unavailable#

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

<IllustratedMessage>
  <Unavailable />
  <Heading>Error 503: Service Unavailable</Heading>
  <Content>
    This page isn't working. Try a different page or try again later.
  </Content>
</IllustratedMessage>
import Unavailable from '@spectrum-icons/illustrations/Unavailable';

<IllustratedMessage>
  <Unavailable />
  <Heading>Error 503: Service Unavailable</Heading>
  <Content>
    This page isn't working. Try a different page or try
    again later.
  </Content>
</IllustratedMessage>
import Unavailable from '@spectrum-icons/illustrations/Unavailable';

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

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';

<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';

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