Documentation

Type

Messages have basic types that can be used to inform users about different types of interactions or events. Use the type prop to change the type of the message.

A successful message.
An information message.
A warning message.
A destructive message.
Show code
vue

Icon

Messages can have icons that symbolize the type of the message. Use the icon to enable the message icon.

A successful message.
An information message.
A warning message.
A destructive message.
Show code
vue

Radius

Messages can have different radius factors. Use the rounded prop to change the radius of the message.

A successful message.
An information message.
A warning message.
A destructive message.
Show code
vue
classes
Optional CSS classes to apply to the component inner elements.
Show example
vue
closable
Whether to show a close button.
Show example
vue
close-icon
The icon to show in the close button
Show example
vue
default-icons
Default icons to apply to the messages, when the icon is active.
Show example
vue
icon
Whether to show an icon, or the name of the icon to display.
Show example
vue
message
The message to display.
Show example
vue
color
The color of the message.
Show example
vue
rounded
The radius of the message.
Show example
vue
@close
This events receive no value
Show example
vue
#icon
Show example
vue
#default
This slot has no inherted props
Show example
vue
#close-button
This slot has no inherted props
Show example
vue
color
The color of the message.
Show example
vue
rounded
The radius of the message.
Show example
vue