Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Buttons

Overview

Signal key actions on a page, form, or dialog.

Preview

View Kitchen Sink 
<div class="fsa-level">
  <button class="fsa-btn fsa-btn--primary" type="button">Label</button>
  <button class="fsa-btn fsa-btn--secondary" type="button">Label</button>
  <button class="fsa-btn fsa-btn--tertiary" type="button">Label</button>
  <button class="fsa-btn fsa-btn--flat" type="button">Label</button>
  <button class="fsa-btn fsa-btn--plain" type="button">Label</button>
</div>

Variants

Buttons are styled with class="fsa-btn", modifiable with one or multiple fsa-btn--[VARIANT].

<button class="fsa-btn fsa-btn--[VARIANT]" type="button">Label</button>
<a class="fsa-btn fsa-btn--[VARIANT]" href="/link.html">Label</a>

Primary

<button class="fsa-btn fsa-btn--primary" type="button">Label</button>

Secondary

<button class="fsa-btn fsa-btn--secondary" type="button">Label</button>

Tertiary

<button class="fsa-btn fsa-btn--tertiary" type="button">Label</button>

Flat

<button class="fsa-btn fsa-btn--flat" type="button">Label</button>

Plain

<button class="fsa-btn fsa-btn--plain" type="button">Label</button>

States

Each button variant can be modified with one or multiple states:

<button class="fsa-btn fsa-btn--[VARIANT] fsa-btn--[STATE]" type="button">Label</button>

Fill

<button class="fsa-btn fsa-btn--primary fsa-btn--fill" type="button">Label</button>

Disabled

Disabled buttons do not have a class="fsa-btn--[STATE]", instead using the disabled attribute.

<div class="fsa-level">
  <button class="fsa-btn fsa-btn--primary" type="button" disabled="disabled">Label</button>
  <button class="fsa-btn fsa-btn--secondary" type="button" disabled="disabled">Label</button>
  <button class="fsa-btn fsa-btn--tertiary" type="button" disabled="disabled">Label</button>
  <button class="fsa-btn fsa-btn--flat" type="button" disabled="disabled">Label</button>
</div>

Small

<button class="fsa-btn fsa-btn--primary fsa-btn--small" type="button">Label</button>

Large

<button class="fsa-btn fsa-btn--primary fsa-btn--large" type="button">Label</button>

Icons

Icons can be used to heighten or clarify the button’s action. There may be acceptable uses where a label may be visually hidden (i.e. using a Screenreader-only CSS Utility) and/or paired with an aria-label attribute, though Product Teams should use icon-only buttons cautiously.

Medium

<div class="fsa-level">
  <button class="fsa-btn fsa-btn--primary" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
    Save
  </button>
  <button class="fsa-btn fsa-btn--secondary" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
    Download
  </button>
  <button class="fsa-btn fsa-btn--tertiary" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>
    Remove
  </button>
  <button class="fsa-btn fsa-btn--flat" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>
    Edit
  </button>
  <button class="fsa-btn fsa-btn--plain" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>
    Print
  </button>
</div>

Small

<div class="fsa-level">
  <button class="fsa-btn fsa-btn--small fsa-btn--primary" type="button">
    <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
    Save
  </button>
  <button class="fsa-btn fsa-btn--small fsa-btn--secondary" type="button">
    <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
    Download
  </button>
  <button class="fsa-btn fsa-btn--small fsa-btn--tertiary" type="button">
    <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>
    Remove
  </button>
  <button class="fsa-btn fsa-btn--small fsa-btn--flat" type="button">
    <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>
    Edit
  </button>
  <button class="fsa-btn fsa-btn--small fsa-btn--plain" type="button">
    <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>
    Print
  </button>
</div>

Large

<div class="fsa-level">
  <button class="fsa-btn fsa-btn--large fsa-btn--primary" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
    Save
  </button>
  <button class="fsa-btn fsa-btn--large fsa-btn--secondary" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
    Download
  </button>
  <button class="fsa-btn fsa-btn--large fsa-btn--tertiary" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>
    Remove
  </button>
  <button class="fsa-btn fsa-btn--large fsa-btn--flat" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>
    Edit
  </button>
  <button class="fsa-btn fsa-btn--large fsa-btn--plain" type="button">
    <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>
    Print
  </button>
</div>

Directional

Use an icon on the right if the button’s implicit action conveys a forward progression.

<button class="fsa-btn fsa-btn--primary" type="button">
  Continue
  <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</button>

Custom

Combine the fsa-btn--plain variant with Utilities such as Text Color and Background Color.

<div class="fsa-level fsa-level--wrap">
  <div>
    <button type="button" class="fsa-btn fsa-btn--plain fsa-p--s fsa-radius--full fsa-bg--tertiary-100 fsa-color--tertiary fsa-link:hover--primary fsa-bg:hover--primary-100" title="Vote Up" aria-label="Vote Up">
      <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path></svg>
    </button>
  </div>
  <div>
    <button type="button" class="fsa-btn fsa-btn--plain fsa-p--s fsa-radius--full fsa-bg--tertiary-100 fsa-color--tertiary fsa-link:hover--red fsa-bg:hover--red-100" title="Vote Down" aria-label="Vote Down">
      <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path></svg>
    </button>
  </div>
</div>

Responsive

Several of a button’s style properties can be selectively modified across each Media Query breakpoint.

fsa-btn--[VARIANTS]@[BREAKPOINT], where VARIANTS is one or more of small, medium, large, fill, or inline; and BREAKPOINT is one of s, m, l, or xl

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Usage

Use

  • To trigger an action or behavior, such as submitting a form or spawning a Modal.

Don’t Use

  • Avoid using to navigate between destinations, deferring to a text link instead (SPA implementations may be an exception).
UX Pattern
Action Bar with Table
Complement a data table with actions and pagination.
UI Component
Button Group
Toggle between mutually exclusive states.
UX Pattern
Destroy Prompt
Prompt users to the implications of a destructive action.
UI Component
Form Fields
Data entry from a variety of structured form controls.
UI Component
Growl Notification
Surface application messaging about page-level or out-of-view events.
UI Component
Icons
Visually communicate meaning, actions, status, or feedback.
UI Component
Icons
Visually communicate meaning, actions, status, or feedback.
UX Pattern
Page Title Area
Complement the page title with breadcrumbs and primary actions.
UI Component
Search
Find specific content via user input.
UI Component
Stepped Control
Navigate through a multi-step process with directional actions.
UX Pattern
Stepped Process
Lead the user through a series of steps or flow.
Variant/State Usage Example
A primary style shall be applied to a button that represents the top priority action a User might take within a given UI context. Submitting a form or continuing a stepped process would be considered primary.
A secondary style shall be applied to buttons that are not top priority, may be viewed as contrary to progress, or the action is relevant for adjacent features and functionality. You may think of this as the default button state (despite it's "secondary" name); that is, all buttons are default unless one of the other use cases mentioned on this page come into play. A button labeled "View Producer" that displays data on the same screen without continuing a process.
A tertiary style shall be applied only to buttons that perform a destructive action. "Delete" or "Remove".
Identical in visual nature to a text link (<a>), this treatment is reserved for items of the least importance or deserves no strong prominence.

Using this style ensures the button will not be easily mistaken as an action to take without contemplation from a User. 		Single Page Application architecture (e.g. Angular, React, Vue, etc) often have text links that are technically a <button>, but its UI presents them as more navigational.

A "Cancel" button. By giving this button very low priority and prominence on the screen. While canceling a process may be destructive in nature, it does not remove stored data from the database.
Unsets all style properties, effectively rendering as plain text. Typically used when designing a custom button, e.g. pairing with CSS Utilities like Color, Background, Padding, etc.
Communicates when a button isn’t actionable and is deemphasized in a UI. A button needs to remain present and visible, and becomes actionable only once any number of criteria is met.

General Guidance

  • For multi-stepped user flows (e.g. Wizard) refer to Stepped Control component for usage of buttons within that use case.
  • Button styles can be applied to nearly any HTML element, e.g. <foo class="fsa-btn fsa-btn--[VARIANT]">Label</foo>. 99% of the time it will be a <button> or <a>.
  • For <button> elements, type attribute is required, and will most likely be type="button". Use type="submit" to submit a <form>. Omitting type attribute will default to type="submit".
  • Generally, use primary buttons for actions that go to the next step and use secondary buttons for actions that happen on the current page.
  • Style the button most users should click in a way that distinguishes from other buttons on the page. Try using the “large button” or the most visually distinct fill color.
  • Make sure buttons look clickable — use color variants to distinguish static, hover and active states.
  • Avoid using too many buttons on a page.
  • Use sentence case for button labels, e.g. “Sign up” instead of “Sign Up”.
  • Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “Download,” “View” or “Sign up”).
  • Make the first word of the button’s label an action verb. For example, instead of “Complaint Filing” label the button “File a complaint.”

  • At times, consider adding an icon to signal specific actions (“Download”, “Open in a new window”, etc).

  • All buttons should use an action word to start the label. Eg. “View Details” vs. “Details”.
  • A Cancel button should not be used unless the online form uses a multi-step process.
  • A Cancel button should be used in a Multi-step or multiple screen process so the User feels safe that they are aborting a process.
  • A Cancel or Close button action shall clear the contents of the online form for security/privacy purposes.
  • When used, the Cancel button should appear as a link (i.e. fsa-btn--flat variant) or Secondary button.
  • Buttons shall align to the left with primary or progressive/affirmative action on left, and secondary or regressive/dismissive action on right.

Labeling

Button Label Usage
Submit vs. Save
Use Submit for a button label when providing data that will not be stored, or if the data is submitted by an anonymous User. Use a Save label when the User is authenticated and will be updating data within a system.
  • Submit - Use for submitting data to generate a report
  • Save - Use for updating User profile information or preferences.
Search vs. Submit
  • Search shall be used as the button label when the application is performing a query and returning results.
  • The Search label on a button is more ubiquitous on the web and Users are accustomed to looking for this functionality on a screen.
Back vs. Cancel vs. Exit
  • When returning to a previous screen or step, use Back as the button label.
  • When ceasing a process, such as updating your profile, use Cancel as the button label.
  • Exit shall not be used in the context of returning to a previous screen, as it could imply exiting the application as opposed to the process in the application.
Refresh vs. Reload vs. Reset
  • When data or a state in the application has changed, it is recommended to use Refresh as a label.
  • The Reload label implies getting more data, while Refresh is a more general and User friendly term.
  • Reset implies clearing data and returning to the initial state of data.
Delete vs. Reset
  • A button shall use the Tertiary style when the action taken has destructive capabilities.
  • While Reset is an action that removes data from the screen, it should not be used to remove data from a database or other data storage.

Common Button Labels and Functionality

Button Label Functionality
Add [noun] Add data, add new row, add new template for data entry
Approve

Application specific button designed to be a single source of approval

NOTE: Having an Approve button as compared to an Approve checkbox paired with a Submit button.
Back Return to the previous page in the application.
Calculate [noun] Perform Calculation
Cancel [noun]

Stop current action and cancels out of the process.  Returns users to the page where the action was initiated.

NOTE: If data has been entered, a confirmation message shall be displayed so the user can confirm they want to cancel.
Clear

Clears screen or form of all data.

This button should be used with caution and generally only on pages where data is not actually saved, such as search pages or calculator type applications. When used, this button clears all fields on the page of all values.
Continue Go to the next page in a multi-step process.  This option is intended primarily for informational pages where no information is entered on the page.
Delete

(Delete [noun])

Allows the user to delete specific data or a record.

NOTE: Shall require a confirmation question, such as a pop-up, with a Yes/No response for the user to confirm the deletion. Information about what is being deleted shall also be displayed for the user.
Download [noun] Download an application file to a user's storage device.
Export Download data in various templated formats.
Filter [noun]

Remove all data from data set, except that which matches the selected criteria.

NOTE: Rather than having a filter button, the Farm Programs team would like to explore various types of filtering. This button may still be necessary but Farm Programs would like to see other options.

Go to Application

Allows users to access another application to view or update data.  Opens new application in a separate tab.
Log in Enter an application in an authenticated state.
Log out Exit an application currently in an authenticated state and return to Log in screen.
No Decline response to an action to be taken, such as deleting data or a record.
Refresh Refreshes the data on the page. Primarily used after data has been updated in another application.
Reset

Reset fields to the default field values(s) or previously saved value(s).

NOTE: If data had been saved by the user that varies from the default value(s), the reset will refresh to the most recently saved value(s).
Save [noun] Save data and remains on the current page.
Save & Continue Saves data on the current page of a multi-step or multi-screen process and continues to the next page.
Search Performs a query based on criteria submitted
Select Initiate a Selected Action
Submit [noun]

Send data to an application process, such as saving to a database. Returns users to the page where the action was initiated or to the home page.

NOTE: Data is recorded on multiple pages in a multi-page process. Save or Save & Continue would be the options through each of those pages. However on the page where the producer signature is recorded, the option would be to “Submit” because recording the producer signature signifies the application is being submitted to FPAC for approval consideration. Status of the contract/application would then generally go from “initiated” to “filed” or “signed” as required by the applicable program application.

Upload [noun] Upload data file from a user’s storage device to the web application.
View [noun] Show additional information or detailed information about item.

Accessibility

Always refer to the Accessibility Forms Guide for overall guidance.

  • Buttons should display a visible focus state when users tab to them.
  • Avoid using <div>, <img>, or other such tags to create buttons. Screen readers don’t automatically know either is a usable button.
  • When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
Return to top