IllustratedMessage An IllustratedMessage displays an illustration and a message, usually
for an empty state or an error page.
< IllustratedMessage >
< svg width = "150" height = "103" viewBox = "0 0 150 103" aria-hidden = "true" role = "presentation" >
< path d = "M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" / >
< / svg >
< 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).
function Example ( ) {
let inlineStyle = {
fill : 'none' ,
'stroke-width' : '3px'
} ;
return (
< IllustratedMessage >
< svg width = "199" height = "98" viewBox = "0 0 199 97.7" aria-hidden = "true" role = "presentation" style = { inlineStyle} >
< path d = "M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" / >
< line x1 = "99.5" y1 = "95.5" x2 = "99.5" y2 = "58.5" / >
< path d = "M105.5,73.5h19a2,2,0,0,0,2-2v-43" / >
< path d = "M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" / >
< line x1 = "105.5" y1 = "1.5" x2 = "126.5" y2 = "22.5" / >
< path d = "M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" / >
< path d = "M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" / >
< path d = "M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" / >
< path d = "M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" / >
< rect x = "1.5" y = "34.5" width = "58" height = "39" rx = "2" ry = "2" / >
< / svg >
< 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 svg needs an aria-label prop and a role prop set to img.
< IllustratedMessage >
< svg width = "150" height = "103" viewBox = "0 0 150 103" aria-label = "No Results" role = "img" >
< path d = "M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" / >
< / svg >
< / 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 role string — id string — tabIndex number — aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-controls string — Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-owns string — Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship. aria-hidden boolean | 'false' | 'true' — Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
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