Design System
Buttons
Use buttons to signal actions.
View USWDS component for guidance
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">
