IllustratedMessage

An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging illustration, and conversational tone to better communicate an empty or a success state than just show a message alone.

Each illustration has default internationalised title and subtitle texts. Also they can be managed with titleText and subtitleText properties.

To display the desired illustration, use the name property, where you can find the list of all available illustrations.

Note: By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:

import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"

Note: Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::

import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"

Structure

The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:

Illustration
Title
Subtitle
Actions

Usage

ui5-illustrated-message is meant to be used inside container component, for example a ui5-card, a ui5-dialog or a ui5-page

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";

Basic Sample

Properties

name

Description	Defines the illustration name that will be displayed in the component. Example: `name='BeforeSearch'`, `name='UnableToUpload'`, etc.. Note: To use the TNT illustrations, you need to set the `tnt` or `Tnt` prefix in front of the icon's name. Example: `name='tnt/Avatar'` or `name='TntAvatar'`. Note: By default the `BeforeSearch` illustration is loaded. When using an illustration type, other than the default, it should be loaded in addition: `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";` For TNT illustrations: `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";`
Type	`string`
Default	"BeforeSearch"

size

Description	Determines which illustration breakpoint variant is used. As `IllustratedMessage` adapts itself around the `Illustration`, the other elements of the component are displayed differently on the different breakpoints/illustration sizes.
Type	`"Auto" \| "Base" \| "Dot" \| "Spot" \| "Dialog" \| "Scene"`
Default	"Auto"
Since	1.5.0

subtitleText

Description	Defines the subtitle of the component. Note: Using this property, the default subtitle text of illustration will be overwritten. Note: Using `subtitle` slot, the default of this property will be overwritten.
Type	`string`
Default	""

titleText

Description	Defines the title of the component. Note: Using this property, the default title text of illustration will be overwritten.
Type	`string`
Default	""

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the component.
Type	`string`
Default	""
Since	1.7.0

titleLevel

Description	Defines the semantic level of the title. Note: Used for accessibility purposes only. Note: Doesn't take effect when `title` slot is being used.
Type	`"H1" \| "H2" \| "H3" \| "H4" \| "H5" \| "H6"`
Default	"H2"
Since	1.20.0

Slots

title

Description	Defines the title of the component. Note: Using this slot, the default title text of illustration and the value of `title` property will be overwritten.
Type	`Array<HTMLElement> & string`
Since	1.7.0

subtitle

Description	Defines the subtitle of the component. Note: Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.
Type	`Array<HTMLElement>`
Since	1.0.0-rc.16

default

Description	Defines the component actions.
Type	`Array<IButton>`

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

Name	Description
subtitle	Used to style the subtitle wrapper of the `ui5-illustrated-message`

More Samples

Custom Title

By default the IllustratedMessage displays built-in title, but a custom title can be also set.