Toast

alphaView sourceReka UI
vue
<script setup lang="ts">
import { ref } from 'vue'
import { toast, Button } from '@typlog/ui'

const count = ref(0)

const onClick = () => {
  count.value += 1
  toast(`You have received ${count.value} events.`)
}
</script>

<template>
  <Button @click="onClick">Click me!</Button>
</template>

Provider ​

To use the toast module, you need to set up the ToastProvider first. Simply place it within the ThemeProvider – its position doesn't matter, and it will function as expected.

vue
<script setup>
  import { ThemeProvider, ToastProvider } from '@typlog/ui'
</script>
<template>
  <ThemeProvider>
    <ToastProvider />
  </ThemeProvider>
</template>
PropDefaultType
position
–
Enum
size
–
"1""2""3"

Position ​

You can customize the position of toast messages using the position prop on ToastProvider. By default, toasts appear in the bottom-right corner.

<ToastProvider
  position="bottom-right"
/>

Size ​

You can customize the size of toast messages using one of the three available size options.

<ToastProvider
  size="1"
/>

Examples ​

Methods ​

Promise ​

vue
<script setup lang="ts">
import { toast, Button } from '@typlog/ui'

const successFn = () => new Promise((resolve) => setTimeout(resolve, 2000))
const errorFn = () => new Promise((_, reject) => setTimeout(reject, 2000))

const onClickSuccess = () => {
  toast.promise(successFn, {
    loading: 'Fetching data ....',
    success: () => {
      return 'You have a new message.'
    },
  })
}

const onClickError = () => {
  toast.promise(errorFn, {
    loading: 'Fetching data ....',
    success: () => {
      return 'You have a new message.'
    },
    error: () => {
      return 'You have a new error.'
    },
  })
}
</script>

<template>
  <div class="flex items-center gap-4">
    <Button variant="soft" @click="onClickSuccess">With success</Button>
    <Button color="red" variant="soft" @click="onClickError">With error</Button>
  </div>
</template>

Description ​

vue
<script setup lang="ts">
import { toast, Button } from '@typlog/ui'

const onClick = () => {
  const now = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: '2-digit',
    weekday: 'short',
    hour: '2-digit',
    minute: '2-digit',
  })
  toast({
    title: 'A new event with description.',
    description: now,
  })
}
</script>

<template>
  <Button @click="onClick">Description</Button>
</template>