Buttons

Use buttons to signal actions.

View USWDS component

View login.gov SCSS on GitHub

Button sizes and states

Default

Primary

<button class="usa-button">

Default Hover Active Focus Disabled

Outline

<button class="usa-button usa-button--outline">

Default Hover Active Focus Disabled

Danger

<button class="usa-button usa-button--danger">

Default Hover Active Focus Disabled

Unstyled

<button class="usa-button usa-button--unstyled">

Big

Primary

<button class="usa-button usa-button--big">

Outline

<button class="usa-button usa-button--big usa-button--outline">

Danger

<button class="usa-button usa-button--big usa-button--danger">

Unstyled

<button class="usa-button usa-button--unstyled">

Button widths

Flexible width

Default button width for desktop viewports.

<button class="usa-button">

Default

Default

Use usa-button--flexible-width to set flexible width buttons for mobile.

<button class="usa-button usa-button--flexible-width">

Default

Default

Minimum width

Use usa-button--wide to set a minimum button width for desktop viewports.

<button class="usa-button usa-button--wide">

Default

Default

Full width

All buttons default to full width for mobile viewports.

Use usa-button--full-width to set full-width buttons for desktop viewports.

<button class="usa-button use-button--full-width">

Default

Default