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

Button (button)

For actions in forms, dialogs, and more with support for multiple sizes, states, and more.

🔗 External documentation.

ID Label Description Schema
label Label The button label.
disabled Disabled? Is the button disabled? 
                        type: boolean
label_visually_hidden Hide button label? Is the button's label hidden? 
                        type: boolean
url URL The button URL. Optional. 
                        type: string
format: uri-reference

                      
            id: button
label: Button
description: 'For actions in forms, dialogs, and more with support for multiple sizes, states, and more.'
group: Button
homepage: 'https://getbootstrap.com/docs/5.3/components/buttons/'
variants:
    default:
        id: default
        label: Default
        description: "No 'btn' class added."
    primary__sm:
        id: primary__sm
        label: 'Primary small'
    secondary__sm:
        id: secondary__sm
        label: 'Secondary small'
    success__sm:
        id: success__sm
        label: 'Success small'
    danger__sm:
        id: danger__sm
        label: 'Danger small'
    warning__sm:
        id: warning__sm
        label: 'Warning small'
    info__sm:
        id: info__sm
        label: 'Info small'
    light__sm:
        id: light__sm
        label: 'Light small'
    dark__sm:
        id: dark__sm
        label: 'Dark small'
    link__sm:
        id: link__sm
        label: 'Link small'
    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
    link:
        id: link
        label: Link
    primary__lg:
        id: primary__lg
        label: 'Primary large'
    secondary__lg:
        id: secondary__lg
        label: 'Secondary large'
    success__lg:
        id: success__lg
        label: 'Success large'
    danger__lg:
        id: danger__lg
        label: 'Danger large'
    warning__lg:
        id: warning__lg
        label: 'Warning large'
    info__lg:
        id: info__lg
        label: 'Info large'
    light__lg:
        id: light__lg
        label: 'Light large'
    dark__lg:
        id: dark__lg
        label: 'Dark large'
    link__lg:
        id: link__lg
        label: 'Link large'
    outline_primary__sm:
        id: outline_primary__sm
        label: 'Outline Primary small'
    outline_secondary__sm:
        id: outline_secondary__sm
        label: 'Outline Secondary small'
    outline_success__sm:
        id: outline_success__sm
        label: 'Outline Success small'
    outline_danger__sm:
        id: outline_danger__sm
        label: 'Outline Danger small'
    outline_warning__sm:
        id: outline_warning__sm
        label: 'Outline Warning small'
    outline_info__sm:
        id: outline_info__sm
        label: 'Outline Info small'
    outline_light__sm:
        id: outline_light__sm
        label: 'Outline Light small'
    outline_dark__sm:
        id: outline_dark__sm
        label: 'Outline Dark small'
    outline_primary:
        id: outline_primary
        label: 'Outline Primary'
    outline_secondary:
        id: outline_secondary
        label: 'Outline Secondary'
    outline_success:
        id: outline_success
        label: 'Outline Success'
    outline_danger:
        id: outline_danger
        label: 'Outline Danger'
    outline_warning:
        id: outline_warning
        label: 'Outline Warning'
    outline_info:
        id: outline_info
        label: 'Outline Info'
    outline_light:
        id: outline_light
        label: 'Outline Light'
    outline_dark:
        id: outline_dark
        label: 'Outline Dark'
    outline_primary__lg:
        id: outline_primary__lg
        label: 'Outline Primary large'
    outline_secondary__lg:
        id: outline_secondary__lg
        label: 'Outline Secondary large'
    outline_success__lg:
        id: outline_success__lg
        label: 'Outline Success large'
    outline_danger__lg:
        id: outline_danger__lg
        label: 'Outline Danger large'
    outline_warning__lg:
        id: outline_warning__lg
        label: 'Outline Warning large'
    outline_info__lg:
        id: outline_info__lg
        label: 'Outline Info large'
    outline_light__lg:
        id: outline_light__lg
        label: 'Outline Light large'
    outline_dark__lg:
        id: outline_dark__lg
        label: 'Outline Dark large'
slots:
    label:
        id: label
        label: Label
        description: 'The button label.'
props:
    disabled:
        id: disabled
        label: 'Disabled?'
        description: 'Is the button disabled?'
        schema:
            type: boolean
    label_visually_hidden:
        id: label_visually_hidden
        label: 'Hide button label?'
        description: "Is the button's label hidden?"
        schema:
            type: boolean
    url:
        id: url
        label: URL
        description: 'The button URL. Optional.'
        schema:
            type: string
            format: uri-reference
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': button
            label: Submit
            url: 'https://example.com'

Default ( default )

No 'btn' class added.

Submit
<a href="https://example.com" role="button">Submit</a>

Primary small ( primary__sm )

Submit
<a class="btn-primary btn-sm btn" href="https://example.com" role="button">Submit</a>

Secondary small ( secondary__sm )

Submit
<a class="btn-secondary btn-sm btn" href="https://example.com" role="button">Submit</a>

Success small ( success__sm )

Submit
<a class="btn-success btn-sm btn" href="https://example.com" role="button">Submit</a>

Danger small ( danger__sm )

Submit
<a class="btn-danger btn-sm btn" href="https://example.com" role="button">Submit</a>

Warning small ( warning__sm )

Submit
<a class="btn-warning btn-sm btn" href="https://example.com" role="button">Submit</a>

Info small ( info__sm )

Submit
<a class="btn-info btn-sm btn" href="https://example.com" role="button">Submit</a>

Light small ( light__sm )

Submit
<a class="btn-light btn-sm btn" href="https://example.com" role="button">Submit</a>

Dark small ( dark__sm )

Submit
<a class="btn-dark btn-sm btn" href="https://example.com" role="button">Submit</a>

Link small ( link__sm )

Submit
<a class="btn-link btn-sm btn" href="https://example.com" role="button">Submit</a>

Primary ( primary )

Submit
<a class="btn-primary btn" href="https://example.com" role="button">Submit</a>

Secondary ( secondary )

Submit
<a class="btn-secondary btn" href="https://example.com" role="button">Submit</a>

Success ( success )

Submit
<a class="btn-success btn" href="https://example.com" role="button">Submit</a>

Danger ( danger )

Submit
<a class="btn-danger btn" href="https://example.com" role="button">Submit</a>

Warning ( warning )

Submit
<a class="btn-warning btn" href="https://example.com" role="button">Submit</a>

Info ( info )

Submit
<a class="btn-info btn" href="https://example.com" role="button">Submit</a>

Light ( light )

Submit
<a class="btn-light btn" href="https://example.com" role="button">Submit</a>

Dark ( dark )

Submit
<a class="btn-dark btn" href="https://example.com" role="button">Submit</a>

Link ( link )

Primary large ( primary__lg )

Submit
<a class="btn-primary btn-lg btn" href="https://example.com" role="button">Submit</a>

Secondary large ( secondary__lg )

Submit
<a class="btn-secondary btn-lg btn" href="https://example.com" role="button">Submit</a>

Success large ( success__lg )

Submit
<a class="btn-success btn-lg btn" href="https://example.com" role="button">Submit</a>

Danger large ( danger__lg )

Submit
<a class="btn-danger btn-lg btn" href="https://example.com" role="button">Submit</a>

Warning large ( warning__lg )

Submit
<a class="btn-warning btn-lg btn" href="https://example.com" role="button">Submit</a>

Info large ( info__lg )

Submit
<a class="btn-info btn-lg btn" href="https://example.com" role="button">Submit</a>

Light large ( light__lg )

Submit
<a class="btn-light btn-lg btn" href="https://example.com" role="button">Submit</a>

Dark large ( dark__lg )

Submit
<a class="btn-dark btn-lg btn" href="https://example.com" role="button">Submit</a>

Link large ( link__lg )

Submit
<a class="btn-link btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Primary small ( outline_primary__sm )

Submit
<a class="btn-outline-primary btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Secondary small ( outline_secondary__sm )

Submit
<a class="btn-outline-secondary btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Success small ( outline_success__sm )

Submit
<a class="btn-outline-success btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Danger small ( outline_danger__sm )

Submit
<a class="btn-outline-danger btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Warning small ( outline_warning__sm )

Submit
<a class="btn-outline-warning btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Info small ( outline_info__sm )

Submit
<a class="btn-outline-info btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Light small ( outline_light__sm )

Submit
<a class="btn-outline-light btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Dark small ( outline_dark__sm )

Submit
<a class="btn-outline-dark btn-sm btn" href="https://example.com" role="button">Submit</a>

Outline Primary ( outline_primary )

Submit
<a class="btn-outline-primary btn" href="https://example.com" role="button">Submit</a>

Outline Secondary ( outline_secondary )

Submit
<a class="btn-outline-secondary btn" href="https://example.com" role="button">Submit</a>

Outline Success ( outline_success )

Submit
<a class="btn-outline-success btn" href="https://example.com" role="button">Submit</a>

Outline Danger ( outline_danger )

Submit
<a class="btn-outline-danger btn" href="https://example.com" role="button">Submit</a>

Outline Warning ( outline_warning )

Submit
<a class="btn-outline-warning btn" href="https://example.com" role="button">Submit</a>

Outline Info ( outline_info )

Submit
<a class="btn-outline-info btn" href="https://example.com" role="button">Submit</a>

Outline Light ( outline_light )

Submit
<a class="btn-outline-light btn" href="https://example.com" role="button">Submit</a>

Outline Dark ( outline_dark )

Submit
<a class="btn-outline-dark btn" href="https://example.com" role="button">Submit</a>

Outline Primary large ( outline_primary__lg )

Submit
<a class="btn-outline-primary btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Secondary large ( outline_secondary__lg )

Submit
<a class="btn-outline-secondary btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Success large ( outline_success__lg )

Submit
<a class="btn-outline-success btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Danger large ( outline_danger__lg )

Submit
<a class="btn-outline-danger btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Warning large ( outline_warning__lg )

Submit
<a class="btn-outline-warning btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Info large ( outline_info__lg )

Submit
<a class="btn-outline-info btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Light large ( outline_light__lg )

Submit
<a class="btn-outline-light btn-lg btn" href="https://example.com" role="button">Submit</a>

Outline Dark large ( outline_dark__lg )

Submit
<a class="btn-outline-dark btn-lg btn" href="https://example.com" role="button">Submit</a>