IllustratedMessage

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

installyarn add @adobe/react-spectrum
version3.1.0
usageimport {IllustratedMessage} from '@adobe/react-spectrum'

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
childrenReactNodeThe contents of the IllustratedMessage.
Layout
NameTypeDefaultDescription
flexstringnumberbooleanWhen used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrownumberWhen used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinknumberWhen used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisnumberstringWhen 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.
ordernumberThe layout order for the element within a flex or grid container. See MDN.
gridAreastringWhen used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnstringWhen used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowstringWhen used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartstringWhen used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndstringWhen used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartstringWhen used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndstringWhen used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDefaultDescription
marginDimensionValueThe margin for all four sides of the element. See MDN.
marginTopDimensionValueThe margin for the top side of the element. See MDN.
marginBottomDimensionValueThe margin for the bottom side of the element. See MDN.
marginStartDimensionValueThe margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndDimensionValueThe margin for the logical end side of an element, depending on layout direction. See MDN.
marginXDimensionValueThe margin for both the left and right sides of the element. See MDN.
marginYDimensionValueThe margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDefaultDescription
widthDimensionValueThe width of the element. See MDN.
minWidthDimensionValueThe minimum width of the element. See MDN.
maxWidthDimensionValueThe maximum width of the element. See MDN.
heightDimensionValueThe height of the element. See MDN.
minHeightDimensionValueThe minimum height of the element. See MDN.
maxHeightDimensionValueThe maximum height of the element. See MDN.
Positioning
NameTypeDefaultDescription
position'static''relative''absolute''fixed''sticky'Specifies how the element is positioned. See MDN.
topDimensionValueThe top position for the element. See MDN.
bottomDimensionValueThe bottom position for the element. See MDN.
leftDimensionValueThe left position for the element. See MDN. Consider using start instead for RTL support.
rightDimensionValueThe right position for the element. See MDN. Consider using start instead for RTL support.
startDimensionValueThe logical start position for the element, depending on layout direction. See MDN.
endDimensionValueThe logical end position for the element, depending on layout direction. See MDN.
zIndexnumberThe stacking order for the element. See MDN.
isHiddenbooleanHides the element.
Accessibility
NameTypeDefaultDescription
idstringThe element's unique identifier. See MDN.
Advanced
NameTypeDefaultDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets 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>