Vitral 0.2
Messages

Message

An inline message with a title, an action and a close button, in every severity.

WAI-ARIA tested

Import

main.ts
import { Message } from '@vitral/vue';

InfoBar

Title and message share a line while they fit.

Update available
Restart the app to install version 2.4.
Backup complete
1,204 files were copied to the cloud.
<script setup lang="ts">import { Message, StackPanel } from '@vitral/vue';</script> <template>    <StackPanel spacing="0.625rem" style="width: 100%">        <Message severity="info" title="Update available">Restart the app to install version 2.4.</Message>        <Message severity="success" title="Backup complete">1,204 files were copied to the cloud.</Message>        <Message severity="warn" title="Storage almost full">You have used 92% of your 15 GB.</Message>        <Message severity="danger" title="Sync failed">The server could not be reached. Check your connection and try again.</Message>    </StackPanel></template>

Action and close

The action slot holds a button or link; `closable` adds a close button that emits `close`.

New sign-in
Someone signed in from a new device in São Paulo. 
<script setup lang="ts">import { Button, Message, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const shown = ref(true);const key = ref(0);</script> <template>    <StackPanel spacing="0.625rem" style="width: 100%">        <Message v-if="shown" :key="key" severity="info" title="New sign-in" closable @close="shown = false">            Someone signed in from a new device in São Paulo.            <template #action>                <Button label="Review" size="small" severity="secondary" />            </template>        </Message>        <Button v-else label="Show it again" severity="secondary" size="small" @click="(shown = true), key++" />    </StackPanel></template>

Variants

`outlined` and `simple`; every severity works with each.

Drafts are kept for 30 days.
Username is available.
<script setup lang="ts">import { Message, StackPanel } from '@vitral/vue';</script> <template>    <StackPanel spacing="0.625rem" style="width: 100%">        <Message severity="secondary" variant="outlined">Drafts are kept for 30 days.</Message>        <Message severity="danger" variant="outlined" title="Invalid token">Sign in again to continue.</Message>        <Message severity="danger" variant="simple">Password must have at least 8 characters.</Message>        <Message severity="success" variant="simple" icon="check">Username is available.</Message>    </StackPanel></template>

API

Read from packages/vue/src/components/Message/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
severitySeverityDefaults to `'info'`. `danger` and `warn` are announced at once, as alerts; the rest politely.
titlestringThe InfoBar's title, in bold before the message.
iconIconPropReplaces the severity's icon.
hideIconbooleanHide the icon.
closablebooleanShow a close button; closing hides the message and emits `close`.
variantMessageVariant`'subtle'` (a tinted band, the default), `'outlined'` or `'simple'` (coloured text only).
lifenumberMilliseconds before it hides by itself; the count pauses while it is hovered or focused.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
closeevent: Event—
life-end——

Slots

NameSlot propsDescription
default——
action—The InfoBar's action area: a button or a link beside the message.
icon——
closeicon——

Used in these templates