Message

Message component is used to display inline messages.

Download #


npx volt-vue add Message

Import #


import Message from '@/volt/Message.vue';

Basic #

Message component requires a content to display.


<template>
    <div class="card">
        <Message>Message Content</Message>
    </div>
</template>

<script setup lang="ts">
import Message from '@/volt/Message.vue';
</script>

Severity #

The severity option specifies the type of the message.


<template>
    <div class="card flex flex-wrap gap-4 justify-center">
        <Message severity="success">Success Message</Message>
        <Message severity="info">Info Message</Message>
        <Message severity="warn">Warn Message</Message>
        <Message severity="error">Error Message</Message>
        <Message severity="secondary">Secondary Message</Message>
        <Message severity="contrast">Contrast Message</Message>
    </div>
</template>

<script setup lang="ts">
import Message from '@/volt/Message.vue';
</script>

Icon #

Icon property and the icon slots are available to customize the icon of the message.


<template>
     <div class="card flex justify-center gap-4">
        <Message severity="info" icon="pi pi-send">Info Message</Message>
        <Message severity="success">
            <template #icon>
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
            </template>
            <span class="ml-2">How may I help you?</span>
        </Message>
    </div>
</template>

<script setup lang="ts">
import Avatar from '@/volt/Avatar.vue';
import Message from '@/volt/Message.vue';
</script>

Outlined #

Configure the variant value as outlined for messages with borders and no background.


<template>
    <div class="card flex flex-wrap gap-4 justify-center">
        <Message severity="success" variant="outlined">Success Message</Message>
        <Message severity="info" variant="outlined">Info Message</Message>
        <Message severity="warn" variant="outlined">Warn Message</Message>
        <Message severity="error" variant="outlined">Error Message</Message>
        <Message severity="secondary" variant="outlined">Secondary Message</Message>
        <Message severity="contrast" variant="outlined">Contrast Message</Message>
    </div>
</template>

<script setup lang="ts">
import Message from '@/volt/Message.vue';
</script>

Simple #

Configure the variant value as simple for messages without borders, backgrounds and paddings.


<template>
    <div class="card flex flex-wrap gap-8 justify-center">
        <Message severity="success" variant="simple">Success Message</Message>
        <Message severity="info" variant="simple">Info Message</Message>
        <Message severity="warn" variant="simple">Warn Message</Message>
        <Message severity="error" variant="simple">Error Message</Message>
        <Message severity="secondary" variant="simple">Secondary Message</Message>
        <Message severity="contrast" variant="simple">Contrast Message</Message>
    </div>
</template>

<script setup lang="ts">
import Message from '@/volt/Message.vue';
</script>

Sizes #

Message provides small and large sizes as alternatives to the base.


<template>
    <div class="card flex flex-col items-center gap-4">
        <Message size="small" icon="pi pi-send">Small Message</Message>
        <Message icon="pi pi-user">Normal Message</Message>
        <Message size="large" icon="pi pi-check">Large Message</Message>
    </div>
</template>

<script setup lang="ts">
import Message from '@/volt/Message.vue';
</script>

Forms #

Validation errors in a form are displayed with the error severity.


<template>
    <div class="card flex justify-center">
        <div class="flex flex-col gap-4">
            <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
            <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
            <div class="flex flex-col gap-1">
                <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
                <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
            </div>
            <div class="flex flex-col gap-1">
                <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
                <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import Message from '@/volt/Message.vue';
import { ref } from 'vue';

const username = ref(null);
const email = ref(null);
</script>

Dynamic #

Multiple messages can be displayed using the standard v-for directive.


<template>
    <div class="card flex flex-col items-center justify-center gap-4">
        <div class="flex gap-2">
            <Button label="Show" @click="addMessages()" />
            <SecondaryButton label="Clear" @click="clearMessages()" />
        </div>
        <div class="flex flex-col gap-4">
            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
        </div>
    </div>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import Message from '@/volt/Message.vue';
import { ref } from 'vue';

const messages = ref([]);
let count = ref(0);

const addMessages = () => {
    messages.value = [
        { severity: 'info', content: 'Dynamic Info Message', id: count.value++ },
        { severity: 'success', content: 'Dynamic Success Message', id: count.value++ },
        { severity: 'warn', content: 'Dynamic Warn Message', id: count.value++ }
    ];
};

const clearMessages = () => {
    messages.value = [];
};
</script>

Closable #

Enable closable option to display an icon to remove a message.


<template>
    <div class="card">
        <Message closable>Closable Message</Message>
    </div>
</template>

<script setup lang="ts">
import Message from '@/volt/Message.vue';
</script>

Life #

Messages can disappear automatically by defined the life in milliseconds.


<template>
    <div class="card flex flex-col items-center justify-center">
        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
    </div>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue';
import Message from '@/volt/Message.vue';
import { ref } from 'vue';

let visible = ref(false);

const showMessage() {
    visible.value = true;

    setTimeout(() => {
        visible.value = false;
    }, 3500);
}
</script>