Message

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

1<script setup lang="ts">2import { Button, Message, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const shown = ref(true);6const key = ref(0);7</script>8 9<template>10    <StackPanel spacing="0.625rem" style="width: 100%">11        <Message v-if="shown" :key="key" severity="info" title="New sign-in" closable @close="shown = false">12            Someone signed in from a new device in São Paulo.13            <template #action>14                <Button label="Review" size="small" severity="secondary" />15            </template>16        </Message>17        <Button v-else label="Show it again" severity="secondary" size="small" @click="(shown = true), key++" />18    </StackPanel>19</template>

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