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
url URL 
                        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. '
homepage: 'https://getbootstrap.com/docs/4.6/components/buttons/'
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
    link:
        id: link
        label: Link
    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'
    primary__lg:
        id: primary__lg
        label: 'Large Primary'
    primary__lg__block:
        id: primary__lg__block
        label: 'Large Primary Block'
    secondary__lg__block:
        id: secondary__lg__block
        label: 'Large Secondary Block'
    primary__sm:
        id: primary__sm
        label: 'Small Primary'
    secondary__sm:
        id: secondary__sm
        label: 'Small Secondary'
    outline_primary__sm:
        id: outline_primary__sm
        label: 'Small Outline Primary'
    outline_secondary__sm:
        id: outline_secondary__sm
        label: 'Small Outline Secondary'
    outline_primary__lg:
        id: outline_primary__lg
        label: 'Large Outline Primary'
    outline_primary__lg__block:
        id: outline_primary__lg__block
        label: 'Large Outline Primary Block'
    outline_secondary__lg__block:
        id: outline_secondary__lg__block
        label: 'Large Outline Secondary Block'
    link_primary:
        id: link_primary
        label: 'Link Primary'
slots:
    label:
        id: label
        label: Label
props:
    url:
        id: url
        label: URL
        schema:
            type: string
            format: uri-reference
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': button
            label: Submit
            url: 'http://example.com'

Primary ( primary )

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

Secondary ( secondary )

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

Success ( success )

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

Danger ( danger )

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

Warning ( warning )

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

Info ( info )

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

Light ( light )

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

Dark ( dark )

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

Link ( link )

Outline Primary ( outline_primary )

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

Outline Secondary ( outline_secondary )

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

Outline Success ( outline_success )

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

Outline Danger ( outline_danger )

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

Outline Warning ( outline_warning )

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

Outline Info ( outline_info )

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

Outline Light ( outline_light )

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

Outline Dark ( outline_dark )

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

Large Primary ( primary__lg )

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

Large Primary Block ( primary__lg__block )

Submit
<a class="btn-primary btn-lg btn-block btn" href="http://example.com">Submit</a>

Large Secondary Block ( secondary__lg__block )

Submit
<a class="btn-secondary btn-lg btn-block btn" href="http://example.com">Submit</a>

Small Primary ( primary__sm )

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

Small Secondary ( secondary__sm )

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

Small Outline Primary ( outline_primary__sm )

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

Small Outline Secondary ( outline_secondary__sm )

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

Large Outline Primary ( outline_primary__lg )

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

Large Outline Primary Block ( outline_primary__lg__block )

Submit
<a class="btn-outline-primary btn-lg btn-block btn" href="http://example.com">Submit</a>

Large Outline Secondary Block ( outline_secondary__lg__block )

Submit
<a class="btn-outline-secondary btn-lg btn-block btn" href="http://example.com">Submit</a>

Link Primary ( link_primary )