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

Alert (alert)

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

🔗 External documentation.

ID Label Description Schema
heading Heading The alert heading. Optional.
message Message The alert message.
dismissible Dismissible? It is possible to dismiss any alert inline. 
                        type: boolean

                      
            id: alert
label: Alert
description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.'
homepage: 'https://getbootstrap.com/docs/5.3/components/alerts/'
variants:
    primary:
        id: primary
        label: Primary
    secondary:
        id: secondary
        label: Secondary
    success:
        id: success
        label: Success
    danger:
        id: danger
        label: Danger
    warning:
        id: warning
        label: Warning
    info:
        id: info
        label: Info
    light:
        id: light
        label: Light
    dark:
        id: dark
        label: Dark
slots:
    heading:
        id: heading
        label: Heading
        description: 'The alert heading. Optional.'
    message:
        id: message
        label: Message
        description: 'The alert message.'
props:
    dismissible:
        id: dismissible
        label: 'Dismissible?'
        description: 'It is possible to dismiss any alert inline.'
        schema:
            type: boolean
library:
    css:
        'https://data.dilla.io/bootstrap_5/components/alert/styles/alert.css': {  }
    id: alert
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': alert
            heading: 'Well done!'
            message: 'A simple alert. Check it out!'
            dismissible: true

Primary ( primary )

<div class="alert-primary alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Secondary ( secondary )

<div class="alert-secondary alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Success ( success )

<div class="alert-success alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Danger ( danger )

<div class="alert-danger alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Warning ( warning )

<div class="alert-warning alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Info ( info )

<div class="alert-info alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Light ( light )

<div class="alert-light alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>

Dark ( dark )

<div class="alert-dark alert-dismissible fade show alert" role="alert"> <h4 class="alert-heading">Well done!</h4> A simple alert. Check it out! <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"> </button> </div>