Toast

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

Usage

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

{
  "wait": "Loading client-side content..."
}

Make sure to wrap your app with the App component which uses our Toaster component which uses the ToastProvider component from Reka UI.

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.

title

{
  "wait": "Loading client-side content..."
}

Description

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

title

description

{
  "wait": "Loading client-side content..."
}

Icon

Pass an icon field to the toast.add method to display an Icon.

{
  "wait": "Loading client-side content..."
}

Avatar

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

{
  "wait": "Loading client-side content..."
}

Color

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

color

{
  "wait": "Loading client-side content..."
}

Close

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

{
  "wait": "Loading client-side content..."
}

Close Icon

Pass a closeIcon field to customize the close button Icon.

{
  "wait": "Loading client-side content..."
}

Actions

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

description

{
  "wait": "Loading client-side content..."
}

Progress

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

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

{
  "wait": "Loading client-side content..."
}

Orientation

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

orientation

{
  "wait": "Loading client-side content..."
}

Examples

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.

app.vue

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

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

toaster.position

In this example, we use the AppConfig to configure the position prop of the Toaster component globally.

Change global duration

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

app.vue

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

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

toaster.duration

In this example, we use the AppConfig to configure the duration prop of the Toaster component globally.

Change global max Soon

Change the toaster.max prop on the App component to change the max number of toasts displayed at once.

app.vue

<script setup lang="ts">
const toaster = { max: 3 }
</script>

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

toaster.max

In this example, we use the AppConfig to configure the max prop of the Toaster component globally.

Stacked toasts

Set the toaster.expand prop to false on the App component to display stacked toasts (inspired by Sonner).

app.vue

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

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

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

toaster.expand

{
  "wait": "Loading client-side content..."
}

In this example, we use the AppConfig to configure the expand prop of the Toaster component globally.

API

Props

Prop	Default	Type
`as`	`'li'`	`any` The element or component this component should render as.
`title`		`string \| VNode<RendererNode, RendererElement, { [key: string]: any; }> \| (): VNode<RendererNode, RendererElement, { [key: string]: any; }>`
`description`		`string \| VNode<RendererNode, RendererElement, { [key: string]: any; }> \| (): VNode<RendererNode, RendererElement, { [key: string]: any; }>`
`icon`		`IconComponent`
`avatar`		`AvatarProps`
`color`	`'air-secondary-no-accent'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot" \| "air-secondary"`
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` The orientation between the content and the actions
`close`	`true`	`boolean \| Partial<ButtonProps>` Display a close button to dismiss the toast. `{ size: 'sm', color: 'air-tertiary' }`
`closeIcon`	`icons.close`	`IconComponent` The icon displayed in the close button.
`actions`		`ButtonProps[]` 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' }`
`progress`	`true`	`boolean \| Pick<ProgressProps, "color" \| "b24ui">` Display a progress bar showing the toast's remaining duration. `{ size: 'sm' }`
`defaultOpen`		`boolean` The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` 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`.
`duration`		`number` 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`	`{ b24ui: object; }`
`title`	`{}`
`description`	`{}`
`actions`	`{}`
`close`	`{ b24ui: object; }`

Emits

Event	Type
`pause`	`[]`
`escapeKeyDown`	`[event: KeyboardEvent]`
`resume`	`[]`
`swipeStart`	`[event: SwipeEvent]`
`swipeMove`	`[event: SwipeEvent]`
`swipeCancel`	`[event: SwipeEvent]`
`swipeEnd`	`[event: SwipeEvent]`
`update:open`	`[value: boolean]`

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
`height`	`Ref<number>`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    toast: {
      slots: {
        root: 'dark relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus-visible:outline-(length:--ui-design-outline-stroke-weight) focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-content-divider) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) text-(length:--ui-font-size-sm) font-(--ui-font-weight-normal)',
        wrapper: 'w-0 flex-1 flex flex-col',
        title: 'font-(--ui-font-weight-medium)',
        description: '',
        icon: 'shrink-0 size-6 text-(--b24ui-border-color)',
        avatar: 'shrink-0',
        avatarSize: 'xl',
        actions: 'flex gap-1.5 shrink-0',
        progress: 'absolute inset-x-0 bottom-0',
        close: 'p-0'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-filled-inverted'
          },
          default: {
            root: 'old-style-default'
          },
          danger: {
            root: 'old-style-danger'
          },
          success: {
            root: 'old-style-success'
          },
          warning: {
            root: 'old-style-warning'
          },
          primary: {
            root: 'old-style-primary'
          },
          secondary: {
            root: 'old-style-secondary'
          },
          collab: {
            root: 'old-style-collab'
          },
          ai: {
            root: 'old-style-ai'
          }
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-center',
            actions: 'items-start mt-1'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      defaultVariants: {
        color: 'air-secondary'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        toast: {
          slots: {
            root: 'dark relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus-visible:outline-(length:--ui-design-outline-stroke-weight) focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-content-divider) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) text-(length:--ui-font-size-sm) font-(--ui-font-weight-normal)',
            wrapper: 'w-0 flex-1 flex flex-col',
            title: 'font-(--ui-font-weight-medium)',
            description: '',
            icon: 'shrink-0 size-6 text-(--b24ui-border-color)',
            avatar: 'shrink-0',
            avatarSize: 'xl',
            actions: 'flex gap-1.5 shrink-0',
            progress: 'absolute inset-x-0 bottom-0',
            close: 'p-0'
          },
          variants: {
            color: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              },
              'air-secondary': {
                root: 'style-filled-inverted'
              },
              default: {
                root: 'old-style-default'
              },
              danger: {
                root: 'old-style-danger'
              },
              success: {
                root: 'old-style-success'
              },
              warning: {
                root: 'old-style-warning'
              },
              primary: {
                root: 'old-style-primary'
              },
              secondary: {
                root: 'old-style-secondary'
              },
              collab: {
                root: 'old-style-collab'
              },
              ai: {
                root: 'old-style-ai'
              }
            },
            orientation: {
              horizontal: {
                root: 'items-center',
                actions: 'items-center'
              },
              vertical: {
                root: 'items-center',
                actions: 'items-start mt-1'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          defaultVariants: {
            color: 'air-secondary'
          }
        }
      }
    })
  ]
})

Slideover

A dialog that slides in from any side of the screen.

Tooltip

A small window that shows details when you move your mouse over an item.