IllustratedMessage

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

installyarn add @adobe/react-spectrum
added3.0.0
usageimport {IllustratedMessage} from '@adobe/react-spectrum'
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
flexResponsive<string | number | boolean>—When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>—When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>—When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<number | string>—When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'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.
justifySelfResponsive<'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.
orderResponsive<number>—The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>—When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>—When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>—When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>—When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>—When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>—When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>—When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDefaultDescription
marginResponsive<DimensionValue>—The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>—The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>—The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>—The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>—The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>—The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>—The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDefaultDescription
widthResponsive<DimensionValue>—The width of the element. See MDN.
minWidthResponsive<DimensionValue>—The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>—The maximum width of the element. See MDN.
heightResponsive<DimensionValue>—The height of the element. See MDN.
minHeightResponsive<DimensionValue>—The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>—The maximum height of the element. See MDN.
Positioning
NameTypeDefaultDescription
positionResponsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>—Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>—The top position for the element. See MDN.
bottomResponsive<DimensionValue>—The bottom position for the element. See MDN.
leftResponsive<DimensionValue>—The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>—The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>—The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>—The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>—The stacking order for the element. See MDN.
isHiddenResponsive<boolean>—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.

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

<IllustratedMessage>
  <NoSearchResults />
  <Heading>No matching results</Heading>
  <Content>Try another search.</Content>
</IllustratedMessage>
import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';

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

403 Forbidden#

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

<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>
import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

<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>
import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';

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

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>