Toast

Display brief, auto-dismissable messages to users

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

---
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>

<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>

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',
    position: 'bottom-left'
})

type Toast = {
    element: string
    timeout?: number
    title?: string
    content?: string
    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

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