Accordion Button Card Carousel Dialog Dropdown Layout List group Navbar Navigation Navs and tabs Others Toast Typography

Toast (toast)

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

🔗 External documentation.

ID Label Description Schema
header Header Toast header.
content Content toast The toast item content.
delay Hide delay The duration before automatically hide the toast. In ms. 0 to disable the automatic hide. 
                        type: number
default: 5000
role Role Adapt the role level depending on the content. If it’s an important message like an error, use alert, otherwise use status. 
                        type: string
enum:
    - alert
    - status
    - log
flex_wrapper Add inside flex wrapper Add a flex wrapper inside the toast, see https://getbootstrap.com/docs/5.3/components/toasts/#custom-content. Default: false 
                        type: boolean
hide_close_button Hide close button If checked, you will have to provide a close button in another way. Default: false 
                        type: boolean
close_button_variant Close button variant 
                        type: string
enum:
    - default
    - white

                      
            id: toast
label: Toast
description: 'Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.'
group: Toast
homepage: 'https://getbootstrap.com/docs/5.3/components/toast/'
slots:
    header:
        id: header
        label: Header
        description: 'Toast header.'
    content:
        id: content
        label: 'Content toast'
        description: 'The toast item content.'
props:
    delay:
        id: delay
        label: 'Hide delay'
        description: 'The duration before automatically hide the toast. In ms. 0 to disable the automatic hide.'
        schema:
            type: number
            default: 5000
    role:
        id: role
        label: Role
        description: 'Adapt the role level depending on the content. If it’s an important message like an error, use alert, otherwise use status.'
        schema:
            type: string
            enum:
                - alert
                - status
                - log
    flex_wrapper:
        id: flex_wrapper
        label: 'Add inside flex wrapper'
        description: 'Add a flex wrapper inside the toast, see https://getbootstrap.com/docs/5.3/components/toasts/#custom-content. Default: false'
        schema:
            type: boolean
    hide_close_button:
        id: hide_close_button
        label: 'Hide close button'
        description: 'If checked, you will have to provide a close button in another way. Default: false'
        schema:
            type: boolean
    close_button_variant:
        id: close_button_variant
        label: 'Close button variant'
        schema:
            type: string
            enum:
                - default
                - white
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': toast
            header:
                -
                    '@element': img
                    '@styles':
                        - rounded
                        - me-2
                    src: 'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIHJvdW5kZWQgbWUtMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzAwN2FmZiI+PC9yZWN0Pjwvc3ZnPg=='
                -
                    '@element': strong
                    '@content': Bootstrap
                    '@styles':
                        - me-auto
                -
                    '@element': small
                    '@content': '11 mins ago'
            content:
                - 'Hello, world! This is a toast message.'
            role: alert
            close_button_variant: default
<div aria-atomic="true" aria-live="assertive" class="toast" data-bs-delay="5000" role="alert"> <div class="toast-header"> <img class="rounded me-2" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIHJvdW5kZWQgbWUtMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzAwN2FmZiI+PC9yZWN0Pjwvc3ZnPg==" /> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button aria-label="Close" class="btn-close" data-bs-dismiss="toast" type="button"> </button> </div> <div class="toast-body">Hello, world! This is a toast message.</div> </div>