Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Buttons

Use buttons to signal actions.

View USWDS component for guidance

View Login.gov SCSS on GitHub

Button sizes and states

Default

Primary

<button class="usa-button">

Outline

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

Danger

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

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">

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

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

Minimum width

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

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

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">

design.login.gov

An official website of the General Services Administration

Looking for U.S. government information and services?
Visit USA.gov