WtMessage

Props

Props:

Name	Required	Type	Default	Example code	Description
severity		String	info	<wt-message severity="info"></wt-message>	Severity level: info, success, warn, error, secondary, contrast
closable		Boolean	false	<wt-message closable></wt-message>	Whether the message can be closed
life		Number		<wt-message :life="3000"></wt-message>	Time in milliseconds before message auto-closes
icon		String		<wt-message icon="pi pi-check"></wt-message>	Custom icon to display
closeIcon		String		<wt-message close-icon="pi pi-times"></wt-message>	Custom close icon
variant		String	filled	<wt-message variant="outlined"></wt-message>	Visual variant: filled, outlined, simple
size		String		<wt-message size="small"></wt-message>	Size of the message: small, large (default is medium)

Events:

Name	Params	Description
close	[ { "name": "event", "type": "Event" } ]	Emitted when close button is clicked

Slots:

Name	Scope	Description
default		Message content

Basic Messages

This is an info message

Operation completed successfully

Warning: Please review your input

An error occurred while processing

This is an contrast message

This is an secondary message

Code

<template>
  <wt-tabs
    :current="currentVariant"
    :tabs="tabs"
    wide
    @change="currentVariant = $event"
  />
  <div class="example-container">
    <wt-message 
      :severity="MessageColor.INFO" 
      :variant="currentVariant.value" 
      closable
    >
      This is an info message
    </wt-message>

    <wt-message 
      :severity="MessageColor.SUCCESS" 
      :variant="currentVariant.value" 
      closable
    >
      Operation completed successfully
    </wt-message>

    <wt-message 
      :severity="MessageColor.WARN" 
      :variant="currentVariant.value" 
      closable
    >
      Warning: Please review your input
    </wt-message>

    <wt-message 
      :severity="MessageColor.ERROR" 
      :variant="currentVariant.value" 
      closable
    >
      An error occurred while processing
    </wt-message>

    <wt-message 
      :severity="MessageColor.CONTRAST" 
      :variant="currentVariant.value" 
      closable
    >
      This is an contrast message
    </wt-message>

    <wt-message 
      :severity="MessageColor.SECONDARY" 
      :variant="currentVariant.value" 
      closable
    >
      This is an secondary message
    </wt-message>
  </div>
</template>

<script setup>
import { MessageColor, MessageVariant } from '../../../../../../../src/enums';
import { ref } from 'vue';

const tabs = [
  {
    text: 'Filled',
    value: MessageVariant.FILLED,
  },
  {
    text: 'Outlined',
    value: MessageVariant.OUTLINED,
  },
  {
    text: 'Simple',
    value: MessageVariant.SIMPLE,
  },
]

const currentVariant = ref(tabs[0]);
</script>

<style scoped>
.example-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 20px;
}
</style>

Message Sizes

Small

Small size message

Default (medium)

Default size message

Large

Large size message

Code

<template>
  <div class="example-container">
    <div>
      <h4>Small</h4>
      <wt-message 
        severity="info" 
        :size="ComponentSize.SM" 
        closable
      >
        Small size message
      </wt-message>
    </div>

    <div>
      <h4>Default (medium)</h4>
      <wt-message 
        severity="success" 
        closable
      >
        Default size message
      </wt-message>
    </div>

    <div>
      <h4>Large</h4>
      <wt-message 
        severity="warn" 
        :size="ComponentSize.LG" 
        closable
      >
        Large size message
      </wt-message>
    </div>
  </div>
</template>

<script setup>
import { ComponentSize } from '../../../../../../../src/enums';
</script>

<style scoped>
.example-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.example-container > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wt-text-secondary);
}
</style>