Message
User-facing message with icon.
Message styles and icon will vary depending on the message type (notice, warning, error or success). Messages are block style by default, but can be displayed as inline messages via the inline prop.
Block-style notice messages can be made dismissable by supplying a dismissButtonLabel prop.
Demos
Configurable
| Name | Value |
|---|---|
| Props | |
type | |
inline | |
dismissButtonLabel | |
| Slots | |
default | |
Dismissable notice
Notice messages can be dismissable. This is enabled by setting the message type to 'notice' (or omitting this prop, as 'notice' is the default value) and supplying a semantic label for the dismiss button via the dismissButtonLabel prop. This label will be visually hidden but accessible to screen readers.
When the dismiss button is clicked, the Message component hides itself, and a 'dismissed' event is emitted to the parent component in case the parent component needs to react to the message dismissal in some way.
Note that inline messages cannot be dismissable.
Multiline message
Multiline inline message
With custom icon
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
type | Message type. | MessageType | 'notice', 'warning', 'error', 'success' | 'notice' |
inline | Whether this message follows the inline design (no padding, background color, or border). | boolean | - | false |
dismissButtonLabel | Label text for the dismiss button for notice messages. For notice messages, an icon-only button can be displayed that will hide the message on click. This prop is for the hidden button label required for accessibility. | string | - | '' |
icon | Custom message icon. | Icon | - | null |
Events
| Event name | Properties | Description |
|---|---|---|
| dismissed | Emitted when the message is dismissed by the user. |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |