Toast (toast)

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

🔗 External documentation.

ID Label Description Schema
image Image The alert heading. Optional.
title Title Bootstrap
meta Meta The alert heading. Optional.
body Body The alert message.
dismissible Dismissible? It’s possible to dismiss any alert inline 
                        type: boolean
default: true
delay Delay (ms) Delay hiding the toast (ms). If 0, the toast stays open until manually closed. Default: 0 
                        type: number
role Accessibility role If it’s an important message like an error, use "Alert & Assertive", otherwise use "Status & Polite". 
                        type: string
enum:
    - alert
    - status
default: alert

                      
            id: toast
label: Toast
description: 'Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. '
homepage: 'https://getbootstrap.com/docs/4.6/components/toasts/'
slots:
    image:
        id: image
        label: Image
        description: 'The alert heading. Optional.'
    title:
        id: title
        label: Title
        description: Bootstrap
    meta:
        id: meta
        label: Meta
        description: 'The alert heading. Optional.'
    body:
        id: body
        label: Body
        description: 'The alert message.'
props:
    dismissible:
        id: dismissible
        label: 'Dismissible?'
        description: 'It’s possible to dismiss any alert inline'
        schema:
            type: boolean
            default: true
    delay:
        id: delay
        label: 'Delay (ms)'
        description: 'Delay hiding the toast (ms). If 0, the toast stays open until manually closed. Default: 0'
        schema:
            type: number
    role:
        id: role
        label: 'Accessibility role'
        description: 'If it’s an important message like an error, use "Alert & Assertive", otherwise use "Status & Polite".'
        schema:
            type: string
            enum:
                - alert
                - status
            default: alert
library:
    js:
        'https://data.dilla.io/bootstrap_4/components/toast/init.js': {  }
    id: toast
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': toast
            image:
                '@element': img
                '@styles':
                    - rounded
                    - mr-2
                src: 'https://data.dilla.io/bootstrap_4/assets/toast-image.svg'
            title: 'Well done!'
            meta: '>11 mins ago'
            body: 'Hello, world! This is a toast message.'
            dismissible: true
            delay: 1000
            role: alert
<div aria-atomic="true" aria-live="assertive" class="toast show" data-autohide="true" data-delay="1000" role="alert"> <div class="toast-header"> <img class="rounded mr-2" src="https://data.dilla.io/bootstrap_4/assets/toast-image.svg" /> <strong class="mr-auto">Well done!</strong> <small class="text-muted">&gt;11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body">Hello, world! This is a toast message.</div> </div>