Search documentation v0.6.1

Toast

Display brief, auto-dismissable messages to users

Source ↗️ Report Issue ↗️

Use the Toast component to display short messages to users temporarily on the corner of the browser. Use to provide feedback, alerts, or notifications.

Preview
How to use Toasts in Astro
---
import { Button, Toast } from 'webcoreui/astro'
---
<Button className="button">Show toast</Button>
<Toast className="toast">
Toast with only text.
</Toast>
<script>
import { toast } from 'webcoreui'
document.querySelector('.button').addEventListener('click', () => {
toast('.toast')
})
</script>
How to use Toasts in Svelte
<script>
import { Button, Toast } from 'webcoreui/svelte'
import { toast } from 'webcoreui'
</script>
<Button onClick={() => toast('.toast')}>
Show toast
</Button>
<Toast className="toast">
Toast with only text.
</Toast>
How to use Toasts in React
import React from 'react'
import { Button, Toast } from 'webcoreui/react'
import { toast } from 'webcoreui'
const Component = () => (
<React.Fragment>
<Button onClick={() => toast('.toast')}>
Show toast
</Button>
<Toast className="toast">
Toast with only text.
</Toast>
</React.Fragment>
)
export default Component

To trigger the toast, import the toast function from webcoreui, and call it when the button is clicked. The function expects a query selector that select the Toast component.

Positions

The Toast component can be configured to be shown in different positions on the screen. By default, it’ll be visible in the bottom-right corner. To change its position, set the position prop to one of bottom-left, top-left, top-right, bottom-full, or top-full.

<Toast position="bottom-left">Bottom left toast</Toast>
<Toast position="top-left">Top left toast</Toast>
<Toast position="top-right">Top right toast</Toast>
<Toast position="bottom-full">Bottom full</Toast>
<Toast position="top-full">Top full</Toast>

Toast with Titles

Toasts can be created with titles using the title and titleTag props:

<Toast title="đź’ˇ Note">You can create toasts with titles.</Toast>

Themes

The Toast component comes with four different themes out of the box that can be configured with the theme prop: info, success, warning, alert:

<Toast title="Information" theme="info">Toast with info theme.</Toast>
<Toast title="Congratulations!" theme="success">Toast with success theme.</Toast>
<Toast title="Important" theme="warning">Toast with warning theme.</Toast>
<Toast title="Irreversible action" theme="alert">Toast with alert theme.</Toast>

Toast with Custom Icon

The Toast element can also be triggered with a custom icon in the following way:

---
import { Toast, Icon } from 'webcoreui/astro'
---
<Toast theme="success">
<Icon type="github" slot="icon" />
GitHub repository settings updated.
</Toast>
<script>
import { Toast, Icon } from 'webcoreui/svelte'
</script>
<Toast theme="success">
<Icon type="github" slot="icon" />
GitHub repository settings updated.
</Toast>
import React from 'react'
import { Toast, Icon } from 'webcoreui/react'
const Component = () => (
<Toast icon={<Icon type="github" />} theme="success">
GitHub repository settings updated.
</Toast>
)
export default Component

For Astro and Svelte components, pass a children with a slot named icon. For the React component, pass your icon to the icon prop.

JavaScript API

The Toast component also comes with a JavaScript API that lets you trigger the toast, as well as set the default timeout for toasts after which they disappear, or hide them programmatically.

import { toast } from 'webcoreui'
toast('.selector')
import { hideToast } from 'webcoreui'
hideToast('.selector')
import { setDefaultTimeout } from 'webcoreui'
setDefaultTimeout(3000)

The toast function can also accept a configuration object that lets you programmatically change the content and behavior of your toast:

import { toast } from 'webcoreui'
toast({
element: '.selector',
timeout: 10_000,
title: 'Title set through JS',
content: 'Content updated with JavaScript',
theme: 'info',
position: 'bottom-left'
})
JavaScript API
type Toast = {
element: string
timeout?: number
title?: string
content?: string
theme?: 'info' | 'success' | 'warning' | 'alert' | null
position?: 'bottom-left'
| 'top-left'
| 'top-right'
| 'bottom-full'
| 'top-full'
}
const setDefaultTimeout = (time: number) => number
const toast = (config: Toast | string) => void
const hideToast = (element: string) => void
FunctionPurpose
setDefaultTimeout Sets the default timeout. Defaults to 5 seconds. Expects time in milliseconds.
toast Shows Toast component. Expects a query selector, or a toast config.
hideToast Hides active toast. Expects a query selector.

API

type ToastProps = {
position?: 'bottom-left'
| 'top-left'
| 'top-right'
| 'bottom-full'
| 'top-full'
element?: string
title?: string
titleTag?: string
className?: string
theme?: 'info'
| 'success'
| 'warning'
| 'alert'
}
type ReactToastProps = {
icon?: string
} & ToastProps
Timeline PropPurpose
position Sets the position of the toast. Defaults to bottom-right.
element Sets the HTML element of the toast. Defaults to section.
title Sets a title for the toast.
titleTag Sets the HTML element for the title of the toast. Defaults to strong.
className Pass additional CSS classes for the toast.
theme Sets the theme of the toast. Can be one of info, success, warning, alert.
React propPurpose
icon Pass your Icon component to use a custom icon with the toast.

Request improvement for this page
Toast with only text.
Bottom left toast
Top left toast
Top right toast
Bottom full
Top full
đź’ˇ Note
You can create toasts with titles.
Information
Toast with info theme.
Congratulations!
Toast with success theme.
Important
Toast with warning theme.
Irreversible action
Toast with alert theme.
Dismissable toast
Trigger dismiss with “Hide Toast”.
GitHub repository settings updated.