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’s 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/4.6/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’s possible to dismiss any alert inline'
        schema:
            type: boolean
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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </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 type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>