Modal (`modal`)

Definition
API definition

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

🔗 External documentation.

ID	Label	Description	Schema
title	Title	Modal title.
body	Body	The content of the modal.
footer	Footer content	Footer content
animation	Animation	For modals that simply appear rather than fade in to view.	`type: boolean`
static	Static backdrop	When checked, the modal will not close when clicking outside of it.	`type: boolean`
centered	Vertically centered	Vertically center the modal.	`type: boolean`
scrollable	Scrollable	Allows to scroll the modal body.	`type: boolean`
fullscreen	Fullscreen	Pop up a modal that covers the user viewport.	`type: string enum: - modal-fullscreen - modal-fullscreen-sm-down - modal-fullscreen-md-down - modal-fullscreen-lg-down - modal-fullscreen-xl-down - modal-fullscreen-xxl-down`
heading_level	Heading level	Heading level of the modal.	`type: integer enum: - 1 - 2 - 3 - 4 - 5 - 6`
modal_id	ID	ID used by external buttons to toggle the visibility. Must start with a letter. Randomly generated if empty.	`type: string`

            id: modal
label: Modal
description: "Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."
group: Dialog
homepage: 'https://getbootstrap.com/docs/5.3/components/modal/'
variants:
    sm:
        id: sm
        label: Small
    default:
        id: default
        label: Default
    lg:
        id: lg
        label: Large
    xl:
        id: xl
        label: 'Extra large'
slots:
    title:
        id: title
        label: Title
        description: 'Modal title.'
    body:
        id: body
        label: Body
        description: 'The content of the modal.'
    footer:
        id: footer
        label: 'Footer content'
        description: 'Footer content'
props:
    animation:
        id: animation
        label: Animation
        description: 'For modals that simply appear rather than fade in to view.'
        schema:
            type: boolean
    static:
        id: static
        label: 'Static backdrop'
        description: 'When checked, the modal will not close when clicking outside of it.'
        schema:
            type: boolean
    centered:
        id: centered
        label: 'Vertically centered'
        description: 'Vertically center the modal.'
        schema:
            type: boolean
    scrollable:
        id: scrollable
        label: Scrollable
        description: 'Allows to scroll the modal body.'
        schema:
            type: boolean
    fullscreen:
        id: fullscreen
        label: Fullscreen
        description: 'Pop up a modal that covers the user viewport.'
        schema:
            type: string
            enum:
                - modal-fullscreen
                - modal-fullscreen-sm-down
                - modal-fullscreen-md-down
                - modal-fullscreen-lg-down
                - modal-fullscreen-xl-down
                - modal-fullscreen-xxl-down
    heading_level:
        id: heading_level
        label: 'Heading level'
        description: 'Heading level of the modal.'
        schema:
            type: integer
            enum:
                - 1
                - 2
                - 3
                - 4
                - 5
                - 6
    modal_id:
        id: modal_id
        label: ID
        description: 'ID used by external buttons to toggle the visibility. Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': modal
            title: 'Modal title'
            body: 'Modal body text goes here.'
            footer:
                -
                    '@component': button
                    '@variant': secondary__sm
                    '@attributes':
                        data-bs-dismiss: modal
                    label: Close
                -
                    '@component': button
                    '@variant': primary__sm
                    label: 'Save changes'
            animation: true
            heading_level: 1

Small ( `sm` )

Preview
Source

<div aria-hidden="true" aria-labelledby="label_modal--2122513394" class="modal fade" id="modal--2122513394" tabindex="-1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="label_modal--2122513394">Modal title</h1> <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"> </button> </div> <div class="modal-body">Modal body text goes here.</div> <div class="modal-footer"> <button class="btn-secondary btn-sm btn" data-bs-dismiss="modal" type="button">Close </button> <button class="btn-primary btn-sm btn" type="button">Save changes </button> </div> </div> </div> </div>

Default ( `default` )

Preview
Source

<div aria-hidden="true" aria-labelledby="label_modal-1165413197" class="modal fade" id="modal-1165413197" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="label_modal-1165413197">Modal title</h1> <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"> </button> </div> <div class="modal-body">Modal body text goes here.</div> <div class="modal-footer"> <button class="btn-secondary btn-sm btn" data-bs-dismiss="modal" type="button">Close </button> <button class="btn-primary btn-sm btn" type="button">Save changes </button> </div> </div> </div> </div>

Large ( `lg` )

Preview
Source

<div aria-hidden="true" aria-labelledby="label_modal--1287061580" class="modal fade" id="modal--1287061580" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="label_modal--1287061580">Modal title</h1> <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"> </button> </div> <div class="modal-body">Modal body text goes here.</div> <div class="modal-footer"> <button class="btn-secondary btn-sm btn" data-bs-dismiss="modal" type="button">Close </button> <button class="btn-primary btn-sm btn" type="button">Save changes </button> </div> </div> </div> </div>

Extra large ( `xl` )

Preview
Source

<div aria-hidden="true" aria-labelledby="label_modal-757565440" class="modal fade" id="modal-757565440" tabindex="-1"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="label_modal-757565440">Modal title</h1> <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"> </button> </div> <div class="modal-body">Modal body text goes here.</div> <div class="modal-footer"> <button class="btn-secondary btn-sm btn" data-bs-dismiss="modal" type="button">Close </button> <button class="btn-primary btn-sm btn" type="button">Save changes </button> </div> </div> </div> </div>

Modal (modal)

Small ( sm )

Default ( default )

Large ( lg )

Extra large ( xl )

Modal (`modal`)

Small ( `sm` )

Default ( `default` )

Large ( `lg` )

Extra large ( `xl` )