Toast
We are still updating this page
Some data may be missing here — we will complete it shortly.
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.
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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.
<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.
<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.
<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. |
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 | (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 | |
avatar | AvatarProps | |
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 |
close | true | boolean | Partial<ButtonProps> Display a close button to dismiss the toast.
`{ size: 'sm', color: 'air-tertiary' }`{lang="ts"} |
closeIcon | icons.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. |
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' }`{lang="ts"} | |
progress | true | boolean | Pick<ProgressProps, "color" | "b24ui"> Display a progress bar showing the toast's remaining duration.
`{ size: 'sm' }`{lang="ts"} |
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 | {} |
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
/**
* 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;
}