Accordion Alerts / Banner Buttons Card Collection Combo box Forms Language Layout List Navigation Other Search Social Summary box

Button (button)

A button draws attention to important actions with a large selectable surface.

🔗 External documentation.

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

                      
            id: button
label: Button
description: 'A button draws attention to important actions with a large selectable surface.'
group: Buttons
homepage: 'https://designsystem.digital.gov/components/button/'
variants:
    default:
        id: default
        label: Default
    secondary:
        id: secondary
        label: Secondary
        description: 'Button uses secondary color.'
    accent_cool:
        id: accent_cool
        label: Accent-cool
        description: 'Button uses accent-cool color.'
    accent_warm:
        id: accent_warm
        label: Accent-warm
        description: 'Button uses accent-warm color.'
    base:
        id: base
        label: Base
        description: 'Button uses base color.'
    outline:
        id: outline
        label: Outline
        description: 'Transparent button with a color stroke.'
    inverse:
        id: inverse
        label: 'Outline Inverse'
        description: 'Light color button for dark backgrounds.'
    unstyled:
        id: unstyled
        label: Unstyled
        description: 'A button that looks like a link.'
    default__big:
        id: default__big
        label: 'Primary (Big)'
        description: 'Primary. A bigger button.'
    secondary__big:
        id: secondary__big
        label: 'Secondary (Big)'
        description: 'Button uses secondary color. A bigger button.'
    accent_cool__big:
        id: accent_cool__big
        label: 'Accent-cool (Big)'
        description: 'Button uses accent-cool color. A bigger button.'
    accent_warm__big:
        id: accent_warm__big
        label: 'Accent-warm (Big)'
        description: 'Button uses accent-warm color. A bigger button.'
    base__big:
        id: base__big
        label: 'Base (Big)'
        description: 'Button uses base color. A bigger button.'
slots:
    label:
        id: label
        label: Label
        description: 'The button label.'
props:
    disabled:
        id: disabled
        label: 'Disabled?'
        description: 'Is the button disabled?'
        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 )

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

Secondary ( secondary )

Button uses secondary color.

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

Accent-cool ( accent_cool )

Button uses accent-cool color.

Submit
<a class="usa-button--accent-cool usa-button" href="https://example.com" role="button">Submit</a>

Accent-warm ( accent_warm )

Button uses accent-warm color.

Submit
<a class="usa-button--accent-warm usa-button" href="https://example.com" role="button">Submit</a>

Base ( base )

Button uses base color.

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

Outline ( outline )

Transparent button with a color stroke.

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

Outline Inverse ( inverse )

Light color button for dark backgrounds.

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

Unstyled ( unstyled )

A button that looks like a link.

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

Primary (Big) ( default__big )

Primary. A bigger button.

Submit
<a class="usa-button--default usa-button--big usa-button" href="https://example.com" role="button">Submit</a>

Secondary (Big) ( secondary__big )

Button uses secondary color. A bigger button.

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

Accent-cool (Big) ( accent_cool__big )

Button uses accent-cool color. A bigger button.

Submit
<a class="usa-button--accent-cool usa-button--big usa-button" href="https://example.com" role="button">Submit</a>

Accent-warm (Big) ( accent_warm__big )

Button uses accent-warm color. A bigger button.

Submit
<a class="usa-button--accent-warm usa-button--big usa-button" href="https://example.com" role="button">Submit</a>

Base (Big) ( base__big )

Button uses base color. A bigger button.

Submit
<a class="usa-button--base usa-button--big usa-button" href="https://example.com" role="button">Submit</a>