Clerri UI

Message ​

CMessage component is used to display inline messages.

Basic ​

CMessage component requires a content to display.

vue
<template>
  <CMessage>Message Content</CMessage>
</template>

Severity ​

The severity option specifies the type of the message.

vue

<template>
  <CMessage severity="success">Success Message</CMessage>
  <CMessage severity="info">Info Message</CMessage>
  <CMessage severity="warn">Warn Message</CMessage>
  <CMessage severity="error">Error Message</CMessage>
  <CMessage severity="secondary">Secondary Message</CMessage>
  <CMessage severity="contrast">Contrast Message</CMessage>
</template>

Icon ​

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

vue
<template>
     <div class="card flex justify-center gap-4">
        <CMessage severity="info" icon="pi pi-send">Info Message</CMessage>
        <CMessage severity="success">
         <template #icon>
           <div class="size-7 rounded-full bg-green-800 flex items-center justify-center">
             <i class="pi pi-question text-white"></i>
           </div>
         </template>
         <span class="ml-2">How may I help you?</span>
        </CMessage>
    </div>
</template>

Outlined ​

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

vue
<template>
  <CMessage severity="success" variant="outlined">Success Message</CMessage>
  <CMessage severity="info" variant="outlined">Info Message</CMessage>
  <CMessage severity="warn" variant="outlined">Warn Message</CMessage>
  <CMessage severity="error" variant="outlined">Error Message</CMessage>
  <CMessage severity="secondary" variant="outlined">Secondary Message</CMessage>
  <CMessage severity="contrast" variant="outlined">Contrast Message</CMessage>
</template>

Simple ​

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

vue
<template>
  <CMessage severity="success" variant="simple">Success Message</CMessage>
  <CMessage severity="info" variant="simple">Info Message</CMessage>
  <CMessage severity="warn" variant="simple">Warn Message</CMessage>
  <CMessage severity="error" variant="simple">Error Message</CMessage>
  <CMessage severity="secondary" variant="simple">Secondary Message</CMessage>
  <CMessage severity="contrast" variant="simple">Contrast Message</CMessage>
</template>

Sizes ​

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

vue
<template>
  <CMessage size="small" icon="pi pi-send">Small Message</CMessage>
  <CMessage icon="pi pi-user">Normal Message</CMessage>
  <CMessage size="large" icon="pi pi-check">Large Message</CMessage>
</template>

Closable ​

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

vue
<template>
  <CMessage closable>Closable Message</CMessage>
</template>

Life ​

Messages can disappear automatically by defined the life in milliseconds.

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

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);

function showMessage() {
    visible.value = true;

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