Skip to content

Toast

We are still updating this page

Some data may be missing here — we will complete it shortly.

A short message to offer information or feedback to the user.

Usage

Use the useToast composable to display a toast in your application.

WARNING

Be certain to wrap your app with the App component, which integrates our Toaster component, leveraging the ToastProvider from Reka UI.

TIP

You can check the App component toaster prop to see how to configure the Toaster globally.

Title

Pass a title field to the toast.add method to display a title.

vue
<script setup lang="ts">
export interface ExampleProps {
  title?: string
}

const props = withDefaults(defineProps<ExampleProps>(), {
  title: 'Some title'
})

const toast = useToast()

function showToast() {
  toast.add(props)
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Description

Pass a description field to the toast.add method to display a description.

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  title?: string
  description?: string
}

const props = withDefaults(defineProps<ExampleProps>(), {
  title: 'Some title',
  description: 'Some description'
})

const toast = useToast()

function showToast() {
  toast.add(props)
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Icon

Pass an icon field to the toast.add method to display an @bitrix24/b24icons.

Details
vue
<script setup lang="ts">
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'The calculation of indicators has been completed',
    description: 'Is there anything else you need help with?',
    icon: CopilotAiIcon
  })
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Avatar

Pass an avatar field to the toast.add method to display an Avatar.

Details
vue
<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'The calculation of indicators has been completed',
    description: 'Is there anything else you need help with?',
    avatar: {
      src: '/b24ui/avatar/assistant.png'
    }
  })
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Color

Pass a color field to the toast.add method to change the color of the Toast.

Details
vue
<script setup lang="ts">
import AlarmIcon from '@bitrix24/b24icons-vue/main/AlarmIcon'
import type { ToastProps } from '@bitrix24/b24ui-nuxt'

const props = defineProps<{
  color: ToastProps['color']
}>()

const toast = useToast()

function showToast() {
  toast.add({
    title: 'The calculation of indicators has been completed',
    description: 'Is there anything else you need help with?',
    icon: AlarmIcon,
    color: props.color
  })
}
</script>

<template>
  <B24Button
    label="Show toast"
    @click="showToast"
  />
</template>

Close

Pass a close field to customize or hide the close Button (with false value).

Details
vue
<script setup lang="ts">
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'The calculation of indicators has been completed',
    description: 'Is there anything else you need help with?',
    icon: CopilotAiIcon,
    close: {
      color: 'ai',
      depth: 'dark',
      class: 'rounded-full'
    }
  })
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Close Icon

Pass a closeIcon field to customize the close button @bitrix24/b24icons.

Details
vue
<script setup lang="ts">
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'The calculation of indicators has been completed',
    description: 'Is there anything else you need help with?',
    icon: CopilotAiIcon,
    closeIcon: ArrowToTheRightIcon
  })
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Actions

Pass an actions field to add some Button actions to the Toast.

Details
vue
<script setup lang="ts">
import Refresh9Icon from '@bitrix24/b24icons-vue/crm/Refresh9Icon'

export interface ExampleProps {
  title?: string
  description?: string
}

const props = withDefaults(defineProps<ExampleProps>(), {
  title: 'Some title',
  description: 'Some description'
})

const toast = useToast()

function showToast() {
  toast.add({
    ...props,
    avatar: {
      src: '/b24ui/avatar/employee.png'
    },
    actions: [{
      icon: Refresh9Icon,
      label: 'Retry',
      color: 'primary',
      onClick: (e) => {
        e?.stopPropagation()
      }
    }]
  })
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Progress

Pass a progress field to customize or hide the Progress bar (with false value).

TIP

The Progress bar inherits the Toast color by default, but you can override it using the progress.color field.

Details
vue
<script setup lang="ts">
import Refresh9Icon from '@bitrix24/b24icons-vue/crm/Refresh9Icon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: Refresh9Icon,
    progress: false
  })
}
</script>

<template>
  <B24Button label="Show toast" color="air-primary" @click="showToast" />
</template>

Orientation

Pass an orientation field to the toast.add method to change the orientation of the Toast.

Details
vue
<script setup lang="ts">
import type { ToastProps } from '@bitrix24/b24ui-nuxt'
import Refresh9Icon from '@bitrix24/b24icons-vue/crm/Refresh9Icon'

export interface ExampleProps {
  orientation?: ToastProps['orientation']
  title?: string
  description?: string
}

const props = withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal' as const,
  title: 'Some title',
  description: 'Some description'
})

const toast = useToast()

function showToast() {
  toast.add({
    ...props,
    avatar: {
      src: '/b24ui/avatar/employee.png'
    },
    actions: [{
      icon: Refresh9Icon,
      label: 'Retry',
      color: 'primary',
      onClick: (e) => {
        e?.stopPropagation()
      }
    }]
  })
}
</script>

<template>
  <B24Button label="Show toast" color="primary" @click="showToast" />
</template>

Examples

TIP

Bitrix24 UI provides an App component that wraps your app to provide global configurations.

Change global position

Change the toaster.position prop on the App component to change the position of the toasts.

vue
<script setup lang="ts">
const toaster = { position: 'bottom-right' }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </B24App>
</template>

Change global duration

Change the toaster.duration prop on the App component to change the duration of the toasts.

vue
<script setup lang="ts">
const toaster = { duration: 5000 }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

Stacked toasts

Set the toaster.expand prop to false on the App component to display stacked toasts.

TIP

You can hover over the toasts to expand them. This will also pause the timer of the toasts.

vue
<script setup lang="ts">
const toaster = { expand: true }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

API

Props

Prop Default Type
as'li'any
The element or component this component should render as.
titlestring | VNode<RendererNode, RendererElement, { [key: string]: any; }> | (): VNode<RendererNode, RendererElement, { [key: string]: any; }>
descriptionstring | VNode<RendererNode, RendererElement, { [key: string]: any; }> | (): VNode<RendererNode, RendererElement, { [key: string]: any; }>
icon(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any
avatarAvatarProps
color'air-secondary-no-accent'"default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-primary-warning" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary"
orientation"vertical""horizontal" | "vertical"
The orientation between the content and the actions
closetrueboolean | Partial<ButtonProps>
Display a close button to dismiss the toast. `{ size: 'sm', color: 'air-tertiary' }`{lang="ts"}
closeIconicons.close(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any
The icon displayed in the close button.
actionsButtonProps[]
Display a list of actions: - under the title and description when orientation is `vertical` - next to the close button when orientation is `horizontal` `{ size: 'sm' }`{lang="ts"}
progresstrueboolean | Pick<ProgressProps, "color" | "b24ui">
Display a progress bar showing the toast's remaining duration. `{ size: 'sm' }`{lang="ts"}
defaultOpenboolean
The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
openboolean
The controlled open state of the dialog. Can be bind as `v-model:open`.
type"foreground" | "background"
Control the sensitivity of the toast for accessibility purposes. For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.
durationnumber
Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.
b24ui{ root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; progress?: ClassNameValue; close?: ClassNameValue; }

Slots

Slot Type
leading{}
title{}
description{}
actions{}
close{ b24ui: { root: (props?: Record<string, any>) => string; wrapper: (props?: Record<string, any> | undefined) => string; title: (props?: Record<string, any> | undefined) => string; description: (props?: Record<string, any> | undefined) => string; icon: (props?: Record<string, any> | undefined) => string; avatar: (props?: Record<string, any> | undefined) => string; avatarSize: (props?: Record<string, any> | undefined) => string; actions: (props?: Record<string, any> | undefined) => string; progress: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; }; }

Emits

ts
/**
 * Emitted events for the Toast component
 */
interface ToastEmits {
  pause: (payload: []) => void;
  escapeKeyDown: (payload: [event: KeyboardEvent]) => void;
  resume: (payload: []) => void;
  swipeStart: (payload: [event: SwipeEvent]) => void;
  swipeMove: (payload: [event: SwipeEvent]) => void;
  swipeCancel: (payload: [event: SwipeEvent]) => void;
  swipeEnd: (payload: [event: SwipeEvent]) => void;
  update:open: (payload: [value: boolean]) => void;
}

Released under the MIT License.