Toast Component

The Toast component designed with Vue 3 and Tailwind CSS. possibility to add an Icon, show a Closing button, define a Time-out, change the Position and define a Type.

Installation

To use the Toast component you need to install the @headlessui/vue package.

yarn add @robuust-digital/vue-components @headlessui/vue

Import the component from the toast package

import { Toast } from '@robuust-digital/vue-components/toast';

Import CSS

@import "@robuust-digital/vue-components/toast/css";

Basic Usage

Import and use Toast in your Vue components:

<template>
  <Toast
    title="Toast title goes here"
    :show="toastOpen"
    @toast:close="toastOpen = false;"
  >
    <p>Toast content goes here</p>
  </Toast>
</template>

<script setup>
import { ref } from 'vue';
import { Toast } from '@robuust-digital/vue-components/toast';

const toastOpen = ref(false);
</script>

Props

Prop	Type	Default	Description
show	Boolean	false	Show or hide the toast.
as	String	'div'	Element type to render.
title	String	''	Title displayed in the toast.
icon	Object, Function	null	Specifies an icon to display before the title. @heroicons/vue can be used, or you can import your own .svg files.
timeout	Number, Boolean	5000	Specify the time in ms after when the toast should be closed. Use false to keep the toast showed until closed with the close button.
position	String	bottom	Change this to top to display de toast on top of the page.
type	String	info	Sets the toast's type variant. Accepts predefined values (info, warning, danger, success).
show-close	Boolean	false	Change to true to show a closing button which can close the toast.

Events

Event	Arguments	Description
toast:close	-	Emitted when toast close is requested

Slots

Below is example to edit the content slot of Toast:

Toast with a content slot

<template>
  <Toast title="There were 2 errors with your submission">
    <ul>
      <li>Your password must be at least 8 characters</li>
      <li>Your password must include at least one pro wrestling finishing move</li>
    </ul>
  </Toast>
</template>

Examples

Basic Toast with a icon and a custom timeout

<template>
  <ButtonBase label="Show Toast" @click="toast2Open = true" />

  <Toast
    title="Order completed"
    :show="toast2Open"
    :icon="CheckCircleIcon"
    :timeout="10000"
    @toast:close="toast2Open = false;"
  />
</template>

Succes Toast without timeout and with a closing button

<template>
  <ButtonBase label="Show Toast" @click="toast3Open = true" />

  <Toast
    title="Order completed"
    :show="toast3Open"
    :timeout="false"
    type="success"
    :show-close="true"
    @toast:close="toast3Open = false;"
  />
</template>

Danger Toast on top of the page

<template>
  <ButtonBase label="Show Toast" @click="toast4Open = true" />

  <Toast
    title="There were errors with your submission"
    :show="toast4Open"
    type="danger"
    position="top"
    @toast:close="toast4Open = false;"
  />
</template>

CSS Customization ⚡️

To customize the toast styles global

:root {
  /* Available variables */
  --rvc-toast-border-radius: var(--rvc-base-border-radius);
  --rvc-toast-transition-duration: var(--rvc-base-transition-duration);
  --rvc-toast-transition-timing-function: var(--rvc-base-transition-timing-function);
  --rvc-toast-border-width: var(--rvc-base-border-width);
  --rvc-toast-padding-x: calc(var(--spacing) * 6);
  --rvc-toast-padding-y: calc(var(--spacing) * 6);
  --rvc-toast-width: calc(var(--spacing) * 160);
  --rvc-toast-max-width: calc(100vw - (var(--spacing) * 12));
  --rvc-toast-font-size: var(--text-base);
  --rvc-toast-gap: calc(var(--spacing) * 1.5);
  --rvc-toast-anchor-decoration: underline;
  --rvc-toast-icon-size: calc(var(--spacing) * 6);
  --rvc-toast-title-font-weight: var(--font-weight-medium);
  --rvc-toast-transition-property: colors;
  --rvc-toast-offset: calc(var(--spacing) * 6);

  /* Default (Info) variant */
  --rvc-toast-bg-color: var(--color-blue-50);
  --rvc-toast-border-color: var(--color-blue-200);
  --rvc-toast-color: var(--color-blue-700);
  --rvc-toast-icon-color: var(--color-blue-500);
  --rvc-toast-title-color: var(--color-blue-800);
  --rvc-toast-close-bg-color: var(--color-blue-200);
  --rvc-toast-close-bg-color-hover: var(--color-blue-300);
  --rvc-toast-anchor-color-hover: var(--color-blue-600);

  /* Warning variant */
  --rvc-toast-bg-color-warning: var(--color-yellow-50);
  --rvc-toast-border-color-warning: var(--color-yellow-200);
  --rvc-toast-color-warning: var(--color-yellow-700);
  --rvc-toast-icon-color-warning: var(--color-yellow-500);
  --rvc-toast-title-color-warning: var(--color-yellow-800);
  --rvc-toast-close-bg-color-warning: var(--color-yellow-200);
  --rvc-toast-close-bg-color-warning-hover: var(--color-yellow-300);
  --rvc-toast-anchor-color-warning-hover: var(--color-yellow-600);

  /* Success variant */
  --rvc-toast-bg-color-success: var(--color-green-50);
  --rvc-toast-border-color-success: var(--color-green-200);
  --rvc-toast-color-success: var(--color-green-700);
  --rvc-toast-icon-color-success: var(--color-green-500);
  --rvc-toast-title-color-success: var(--color-green-800);
  --rvc-toast-close-bg-color-success: var(--color-green-200);
  --rvc-toast-close-bg-color-success-hover: var(--color-green-300);
  --rvc-toast-anchor-color-success-hover: var(--color-green-600);

  /* Danger variant */
  --rvc-toast-bg-color-danger: var(--color-red-50);
  --rvc-toast-border-color-danger: var(--color-red-200);
  --rvc-toast-color-danger: var(--color-red-700);
  --rvc-toast-icon-color-danger: var(--color-red-500);
  --rvc-toast-title-color-danger: var(--color-red-800);
  --rvc-toast-close-bg-color-danger: var(--color-red-200);
  --rvc-toast-close-bg-color-danger-hover: var(--color-red-300);
  --rvc-toast-anchor-color-danger-hover: var(--color-red-600);
}