Cedar-UI

Toast

An opinionated toast notification that can be used to show a message. Click a button below to show the toast notification.

Component Source

Position

Types

About ​

The toast component takes functional inspiration from vue-sonner, which is a Vue port of Sonner, originally created by Emil Kowalski for React.

Installation ​

Run the following command ​

npx cedar-ui@latest add toast
npm i @aminnausin/cedar-ui

or download the following folders to your project:

@/components/cedar-ui/toast

Add the ToastController component ​

Add the ToastController component to your App.vue file:

App.vue
vue
<script setup lang="ts">
import { ToastController } from '@/cedar-ui/components/toast'
</script>

<template>
  <ToastController />
</template>

Usage ​

vue
<script setup lang="ts">
import { ButtonText } from '@/components/cedar-ui/button'
import { toast } from '@aminnausin/cedar-ui'
</script>

<template>
  <ButtonText
    variant="form" @click="() => {
      toast.success('Event has been created', {
        description: 'Sunday, December 03, 2023 at 9:00 AM',
      })
    }"
  >
    Add to calendar
  </ButtonText>
</template>

Examples ​

Calendar ​

The example given in the installation steps.

Edit this page on GitHub