Alert ​

The VAlert component is a flexible alert component that can be used to display various types of messages to the user. It is registered globally when you install @morpheme/ui, so you don't need to import it manually.

Usage ​

Basic Usage ​

To use the VAlert component, you can simply include it in your template like this:

Colors ​

• prop: color
• type: string
• default: default
• required: false

You can use the color prop to specify the color style of the alert. The following colors are available:

• default
• primary
• secondary
• info
• warning
• success
• error
• dark

Here's an example of how to use different colors:

Solid Style ​

• prop: solid
• type: boolean
• default: false
• required: false

Use solid to apply solid style to the alert.

Outlined Style ​

• prop: outlined
• type: boolean
• default: false
• required: false

Use outlined to apply outlined style to the alert.

Bordered Style ​

• prop: border
• type: boolean
• default: false
• required: false

Use border to apply bordered style to the alert.

v-model ​

• prop: modelValue
• type: boolean
• default: true
• required: false

You can use the v-model directive to bind the alert to a data model. The modelValue prop is used to represent the model value, and it is a boolean that defaults to true.

Dismissable ​

• prop: dismissable
• type: boolean
• default: false
• required: false

Use dismissable to make alert dismissable.

Transition ​

• prop: transition
• type: string
• default: fade
• required: false

Use transition prop change the default transition.

Props ​

Events ​

To listen for the emit event in a parent component or another component, you can use the @ symbol followed by the event name. For example:

<script setup>
function handleModelValueUpdate(value) {
  // do something with the value passed from the child component
}

function handleDismissed() {
  // do something when the dismissed event is triggered
}
</script>

<template>
  <VAlert
    @update:modelValue="handleModelValueUpdate"
    @dismissed="handleDismissed"
  >
    Alert message
  </VAlert>
</template>

<script setup>
function handleModelValueUpdate(value) {
  // do something with the value passed from the child component
}

function handleDismissed() {
  // do something when the dismissed event is triggered
}
</script>

<template>
  <VAlert
    @update:modelValue="handleModelValueUpdate"
    @dismissed="handleDismissed"
  >
    Alert message
  </VAlert>
</template>

Slots ​

default ​

A slot for placing the alert content/message.

icon ​

A slot for customizing the icon. Receives an icon prop with the name of the current icon.

x-button ​

A slot for customizing the dismiss button. Receives a dismiss prop with a function that dismisses the alert.

x-icon ​

A slot for customizing the icon in the dismiss button.

CSS Variables ​

:root {
  --alert-bg-color: var(--color-white);
  --alert-text-color: var(--color-gray-700);
  --alert-border-color: var(--color-gray-300);
  --alert-border-radius: var(--border-radius-lg);
  --alert-border-width: 1px;
  --alert-padding-x: var(--size-spacing-4);
  --alert-padding-y: var(--size-spacing-3);
  --alert-gap: 0.75rem;
  --alert-font-size: var(--size-font-sm);
  --alert-line-height: 20px;
  --alert-icon-size: 20px;

  // title
  --alert-title-font-size: var(--size-font-sm);
  --alert-title-font-weight: var(--font-weight-semibold);
  --alert-title-line-height: 20px;
}

:root {
  --alert-bg-color: var(--color-white);
  --alert-text-color: var(--color-gray-700);
  --alert-border-color: var(--color-gray-300);
  --alert-border-radius: var(--border-radius-lg);
  --alert-border-width: 1px;
  --alert-padding-x: var(--size-spacing-4);
  --alert-padding-y: var(--size-spacing-3);
  --alert-gap: 0.75rem;
  --alert-font-size: var(--size-font-sm);
  --alert-line-height: 20px;
  --alert-icon-size: 20px;

  // title
  --alert-title-font-size: var(--size-font-sm);
  --alert-title-font-weight: var(--font-weight-semibold);
  --alert-title-line-height: 20px;
}

Customization ​

With the power of CSS Variables and Tailwind's theme function, you can create your custom alert.

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

const isOpen = ref(true);
</script>

<template>
  <VAlert v-model="isOpen" color="indigo"> Alert text </VAlert>
</template>

<style>
.alert-indigo {
  --alert-bg-color: var(--color-indigo-600);
  --alert-text-color: var(--color-white);
  --alert-border-radius: var(--border-radius-lg);
  --alert-border-color: var(--color-indigo-600);
  --alert-border-width: 2px;
  --alert-padding-x: var(--size-spacing-6);
  --alert-padding-y: var(--size-spacing-4);
}
</style>

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

const isOpen = ref(true);
</script>

<template>
  <VAlert v-model="isOpen" color="indigo"> Alert text </VAlert>
</template>

<style>
.alert-indigo {
  --alert-bg-color: var(--color-indigo-600);
  --alert-text-color: var(--color-white);
  --alert-border-radius: var(--border-radius-lg);
  --alert-border-color: var(--color-indigo-600);
  --alert-border-width: 2px;
  --alert-padding-x: var(--size-spacing-6);
  --alert-padding-y: var(--size-spacing-4);
}
</style>

Standalone Installation ​

You can also install the VAlert component individually via @morpheme/alert package:

npm i @morpheme/alert

npm i @morpheme/alert

Then, use it like so.

<script setup lang="ts">
import VAlert from '@morpheme/alert';
</script>

<template>
  <VAlert> Alert text </VAlert>
</template>

<script setup lang="ts">
import VAlert from '@morpheme/alert';
</script>

<template>
  <VAlert> Alert text </VAlert>
</template>

Tailwind Plugin ​

This package comes with custom tailwind plugin for styling. If you are installing this package separately from @morpheme/ui package, you need to include the plugin in plugins section in your Tailwind config file.

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/alert')],
};

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/alert')],
};

Storybook ​

View Storybook documentation here.