IllustratedMessage An IllustratedMessage displays an illustration and a message, usually
for an empty state or an error page.
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 >
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 >
When an IllustratedMessage has a svg and a Heading, the svg needs an aria-hidden prop and a role prop set to presentation.
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 >
Name Type Default Description children ReactNode — The contents of the IllustratedMessage.
Name Type Default Description flex 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 number — When used in a flex layout, specifies how the element will grow to fit the space available. See MDN . flexShrink number — When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN . flexBasis number | 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 . order number — The layout order for the element within a flex or grid container. See MDN . gridArea 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 string — When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN . gridRow string — When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN . gridColumnStart string — When used in a grid layout, specifies the starting column to span within the grid. See MDN . gridColumnEnd string — When used in a grid layout, specifies the ending column to span within the grid. See MDN . gridRowStart string — When used in a grid layout, specifies the starting row to span within the grid. See MDN . gridRowEnd string — When used in a grid layout, specifies the ending row to span within the grid. See MDN .
Name Type Default Description margin DimensionValue — The margin for all four sides of the element. See MDN . marginTop DimensionValue — The margin for the top side of the element. See MDN . marginBottom DimensionValue — The margin for the bottom side of the element. See MDN . marginStart DimensionValue — The margin for the logical start side of the element, depending on layout direction. See MDN . marginEnd DimensionValue — The margin for the logical end side of an element, depending on layout direction. See MDN . marginX DimensionValue — The margin for both the left and right sides of the element. See MDN . marginY DimensionValue — The margin for both the top and bottom sides of the element. See MDN .
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — Specifies how the element is positioned. See MDN . top DimensionValue — The top position for the element. See MDN . bottom DimensionValue — The bottom position for the element. See MDN . left DimensionValue — The left position for the element. See MDN . Consider using start instead for RTL support. right DimensionValue — The right position for the element. See MDN . Consider using start instead for RTL support. start DimensionValue — The logical start position for the element, depending on layout direction. See MDN . end DimensionValue — The logical end position for the element, depending on layout direction. See MDN . zIndex number — The stacking order for the element. See MDN . isHidden boolean — Hides the element.
Name Type Default Description id string — The element's unique identifier.
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.
See the Styling docs for a visualization of these values.
'size-0'
| 'size-10'
| 'size-25'
| 'size-40'
| 'size-50'
| 'size-65'
| 'size-75'
| 'size-85'
| 'size-100'
| 'size-115'
| 'size-125'
| 'size-130'
| 'size-150'
| 'size-160'
| 'size-175'
| 'size-200'
| 'size-225'
| 'size-250'
| 'size-300'
| 'size-350'
| 'size-400'
| 'size-450'
| 'size-500'
| 'size-550'
| 'size-600'
| 'size-675'
| 'size-700'
| 'size-800'
| 'size-900'
| 'size-1000'
| 'size-1200'
| 'size-1250'
| 'size-1600'
| 'size-1700'
| 'size-2000'
| 'size-2400'
| 'size-3000'
| 'size-3400'
| 'size-3600'
| 'size-4600'
| 'size-5000'
| 'size-6000'
| 'static-size-0'
| 'static-size-10'
| 'static-size-25'
| 'static-size-50'
| 'static-size-40'
| 'static-size-65'
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
| 'static-size-150'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
| 'static-size-250'
| 'static-size-300'
| 'static-size-400'
| 'static-size-450'
| 'static-size-500'
| 'static-size-550'
| 'static-size-600'
| 'static-size-700'
| 'static-size-800'
| 'static-size-900'
| 'static-size-1000'
| 'static-size-1200'
| 'static-size-1700'
| 'static-size-2400'
| 'static-size-2600'
| 'static-size-3400'
| 'static-size-3600'
| 'static-size-4600'
| 'static-size-5000'
| 'static-size-6000'
| 'single-line-height'
| 'single-line-width'
| string
& & { }
| number