Feedback

Message

An inline banner for status text: info, success, warning, or error.

Install

import { Message } from 'vael-ui'

Playground

title

variant

appearance

closable

forceMount ?

showIcon

role

import { Message } from 'vael-ui'

<Message title="" variant="info" appearance="default" :closable="false" :forceMount="false" showIcon role="status">Message</Message>

Props

Name	Type	Default	Description
`title`	`string \| undefined`
`variant`	`"success" \| "warning" \| "info" \| "error" \| "default"`	`"default"`	Color variant — sets the icon and border.
`appearance`	`"default" \| "bare"`	`"default"`	`bare` drops the border/background/padding — icon + colored text only, for inline use (e.g. form field validation) instead of a standalone banner.
`closable`	`boolean \| undefined`	`false`	Renders the built-in dismiss button.
`beforeClose`	`((done: () => void) => void) \| undefined`		Called before the model flips to false. Call `done()` to actually close.
`forceMount`	`boolean \| undefined`	`false`	When true, presence is v-show-driven and owned by the consumer (e.g. AnimatePresence).
`showIcon`	`boolean \| undefined`	`true`
`role`	`"status" \| "alert"`		Defaults to `alert` for `error`/`warning`, `status` otherwise.
`ui`	`Partial<{ root: UiPartValue; icon: UiPartValue; content: UiPartValue; title: UiPartValue; description: UiPartValue; actions: UiPartValue; close: UiPartValue; }> \| undefined`
`open`	`boolean \| undefined`	`true`

Slots

Name	Type	Description
`default`	`any`	Description body, under the optional title.
`icon`	`any`	Replaces the default StatusIcon.
`actions`	`any`	Trailing action row, before the close button.

Events

Name	Type	Description
`open-change`	`[value: boolean, details: MessageOpenChangeDetails]`
`update:open`	`[value: boolean]`

Exposed

Name	Type	Description
`el`	`HTMLElement \| null`
`close`	`() => void`
`isClosing`	`boolean`
`cancelClose`	`() => void`