Buttons

Show Code

X-Ray

Overview

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

Preview

<divclass="fsa-level"><buttonclass="fsa-btn fsa-btn--primary"type="button">Label</button><buttonclass="fsa-btn fsa-btn--secondary"type="button">Label</button><buttonclass="fsa-btn fsa-btn--tertiary"type="button">Label</button><buttonclass="fsa-btn fsa-btn--flat"type="button">Label</button><buttonclass="fsa-btn fsa-btn--plain"type="button">Label</button></div>

Variants

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

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

Primary

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

Secondary

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

Tertiary

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

Flat

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

Plain

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

States

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

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

Fill

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

Disabled

Disabled buttons do not have aclass="fsa-btn--[STATE]", instead using thedisabled attribute.

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

Small

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

Large

<buttonclass="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 aScreenreader-only CSS Utility) and/or paired with anaria-label attribute, though Product Teams should use icon-only buttons cautiously.

Medium

<divclass="fsa-level"><buttonclass="fsa-btn fsa-btn--primary"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--secondary"type="button"><svgclass="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"><pathd="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>    Download</button><buttonclass="fsa-btn fsa-btn--tertiary"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--flat"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--plain"type="button"><svgclass="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"><pathd="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

<divclass="fsa-level"><buttonclass="fsa-btn fsa-btn--small fsa-btn--primary"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--small fsa-btn--secondary"type="button"><svgclass="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"><pathd="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>    Download</button><buttonclass="fsa-btn fsa-btn--small fsa-btn--tertiary"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--small fsa-btn--flat"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--small fsa-btn--plain"type="button"><svgclass="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"><pathd="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

<divclass="fsa-level"><buttonclass="fsa-btn fsa-btn--large fsa-btn--primary"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--large fsa-btn--secondary"type="button"><svgclass="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"><pathd="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>    Download</button><buttonclass="fsa-btn fsa-btn--large fsa-btn--tertiary"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--large fsa-btn--flat"type="button"><svgclass="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"><pathd="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><buttonclass="fsa-btn fsa-btn--large fsa-btn--plain"type="button"><svgclass="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"><pathd="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.

<buttonclass="fsa-btn fsa-btn--primary"type="button">  Continue<svgclass="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"><pathd="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></button>

Custom

Combine thefsa-btn--plain variant withUtilities such asText Color andBackground Color.

<divclass="fsa-level fsa-level--wrap"><div><buttontype="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"><svgclass="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"><pathd="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><buttontype="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"><svgclass="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"><pathd="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], whereVARIANTS is one or more ofsmall,medium,large,fill, orinline; andBREAKPOINT is one ofs,m,l, orxl

View on alarger 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 atext 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

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 thetop priority action a User might takewithin 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 arenot top priority, may be viewed as contrary to progress, or the action is relevant foradjacent features and functionality. You may think of this as thedefault 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 adestructive 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 likeColor,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 toStepped Control component for usage of buttons within that use case.
Button styles can be applied to nearly any HTML element, e.g.<foo>Label</foo>. 99% of the time it will be a<button> or<a>.
For<button> elements,type attribute is required, and will most likely betype="button". Usetype="submit" to submit a<form>. Omittingtype attribute will default totype="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
Submitvs. 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.
Searchvs. 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.
Backvs. Cancelvs. Exit	When returning to a previous screen or step, useBack as the button label. When ceasing a process, such as updating your profile, useCancel 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.
Refreshvs. Reloadvs. Reset	When data or a state in the application has changed, it is recommended to useRefresh 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.
Deletevs. Reset	A button shall use theTertiary 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 theAccessibility 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.

Related Resources

Accessibility Forms Guide for overall guidance.
Color

Movatterモバイル変換

Buttons

Overview

Preview

Variants

Primary

Secondary

Tertiary

Flat

Plain

States

Fill

Disabled

Small

Large

Icons

Medium

Small

Large

Directional

Custom

Responsive

Usage

Use

Don’t Use

General Guidance

Labeling

Common Button Labels and Functionality

Accessibility

Related Resources