Message
Message component is used to display inline messages.
Message component requires a content to display.
Usage #
Examples #
Basic #
Message component requires a content to display.
Severity #
The severity option specifies the type of the message.
Icon #
The icon of a message is specified with the icon property.
Outlined #
Configure the variant value as outlined for messages with borders and no background.
Simple #
Configure the variant value as simple for messages without borders and backgrounds.
Sizes #
Message provides small and large sizes as alternatives to the base.
Forms #
Validation errors in a form are displayed with the error severity.
Dynamic #
Multiple messages can be displayed using the standard for block.
Closable #
Enable closable option to display an icon to remove a message.
Life #
Messages can disappear automatically by defined the life in milliseconds.
Accessibility #
Screen Reader
Message component uses alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and aria-label can optionally be used as well.
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default.
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |
