# Button Buttons allow users to take actions from a current state to a future state. ## Guidance Buttons are promises to the user. They must deliver the promise they offer by doing what the button says it will do. ### When to use - Use buttons to guide users to initiate an action, like “Apply” or “Find plans,” or take the next logical step in their journey or form. - Be judicious: Buttons are reserved for the most important actions you want users to take on your site. - **Solid/primary button**: Use for the primary action you want users to take. - **Outline/secondary button**: Use when you have multiple actions available, but it’s not the primary action you want users to take. If there’s no preferred pathway/action, you can use 2 secondary buttons. You don’t have to pair a primary button with a secondary button. - **Ghost button**: Use for non-preferred or less common actions, or when you don’t want to draw focus to the action. - **Alternate buttons**: Use when there’s more than one button on a page that aren’t paired together and you need to highlight a button that’s not a primary action. - **Big button**: Use only for website homepage hero space CTAs that are the start of a user flow or go to multiple pages. - **Small button**: Use for: - Utility actions, like “Print” and “Menu.” - Tertiary situations, such as inline actions within a step, so users can make changes, like “Edit,” “Remove,” or “Add.” The small button provides the inline action to adjust a particular element on the page, while the primary or secondary buttons take the user to the next step in the form or journey. - **Icons with buttons**: Don’t include icons in buttons, except in limited situations: - Utility actions, like print, email, etc. - Mobile CTAs for functionality, like filter, sort, map, and menu. - Branded buttons, like Facebook, Twitter, and YouTube in the website footer. - **Paired buttons**: - Use when there’s 2 clear actions related to each other for a particular action, form, or place in the user journey: - **Form progression**: Always include a primary button for preferred action and secondary or ghost button for nonpreferred action. Example: “Next” and “Back” - **Action submission**: Always include a primary button for preferred action and secondary or ghost button for nonpreferred action. Example: “Save” and “Cancel” - **User journey or multiple options to take action**: Include a primary button for preferred action and secondary button for alternate action. If neither option is preferred, use only secondary buttons. Examples: 1) “Preview plans” and “Apply now” 2) “Log in” and “Create account” 3) “Add,” “Edit,” and “Remove.” - Positions of paired buttons: - *Forms, decisions trees, or progression of steps*: Have the preferred action on the right. Example: “Back” on left and “Next” on right. - *Informational content and other cases*: Have the preferred action on the left. Example: “Create account” on left and “Back to home” on right. - *Mobile*: Have the preferred action appear before (above) the nonpreferred action. - **Multiple buttons on a page**: Use sparingly: Use only when you have multiple main pathways or actions for users to take. Can use both standard and alternate styling as needed to differentiate the actions and create visual order to the design. - **Buttons on cards**: These are generally links to other pages styled as buttons on the front-end to provide visual importance to help users navigate or continue their journey. When styling links in cards as buttons, use either solid or outline variations. If have more than 1 card on a page, the button styling across the cards needs to match. - **Destructive buttons**: Don’t permit users to take a destructive action with a single button. - When including an action that’s non-reversable once taken, always trigger a new pattern, like a pop-up window or other alert, that explains the ramification and forces the user to re-confirm the destructive action. - You must include a way for the user to stop the destructive action. - When providing the options for the destructive action, always have the opt-out or cancel option be the solid button and the destructive action be the outline button. ### When to consider alternatives - Less popular or less important actions may be links. - Buttons are for performing actions, not making choices. If you need your users to make a choice, use something else like radio buttons. Alternatively, if one choice is much less important then try styling it as a link instead. ### Usage - Avoid using too many buttons on a page. Too many buttons confuse users and interrupt their willingness to take an action. - Aim for 1 button per page. - If you need more than 1 button, consider the user journey and action you want the user to take. Users focus on primary buttons for their next step. - Avoid similar styles elsewhere on the page that could be confused for buttons. - Avoid disabled buttons. Buttons that are visible but not usable until all required elements in a form are complete cause user confusion and frustration. Instead, use an active button, but establish error messaging if the form isn’t complete. Refer to error alerts. **Label text** - Aim for 4 words or less. - No articles or punctuation. Use "&" instead of "and." - Pronouns: - Avoid pronouns when going to a page where the user will get generalized information. - Use first-person pronouns when going to a page with personalized information. Example: “Check if I qualify” **Themes: core, healthcare, cmsgov only** - Use sentence case **Theme: medicare only** - Use title case - Describe what will happen, not the current state. Example: "Start over" - Always start with an action verb that describes the main thing users will be able to do once selected. - Pair the action verb with a noun to help it be clearer. Example: “Preview plans” or “Submit application” - In forms, use just the action verb when navigating between steps. Examples: “Next,” “Cancel,” “Back,” “Submit” - In forms and interactive flows, be consistent for steps, and be consistent across tools within the Healthcare, Medicare, or CMS experiences. - Buttons with icons must include a text label. (Don’t use only the icon as a button.) **Themes: healthcare, medicare only** #### Online forms & steps ##### Starting a process or sequential steps Generally better to use specific verbs to confirm what the user is starting. For example, "Create Account."
Use Don't use
Start Begin, Go, Enter, or Submit
**Theme: healthcare only**
Use Don't use
Continue Next
**Theme: medicare only**
Use Don't use
Next Continue
**Themes: healthcare, medicare only** For backward movement to the previous step in the process.
Use Don't use
Back or Go Back Undo or Cancel
##### Stopping a process and returning to beginning
Use Don't use
Cancel X
##### Submiting information or completing a process Generally better to use specific verbs if appropriate to confirm an action.
Use Don't use
Enter, Go, or Submit Fill in, Tell us, Done, or Select
#### Logging in and logging out
Use Don't use
  • Log in - MUST be 2 words and "in" is lowercase when it's an action.
  • Login - Used as 1 word when it's a noun or adjective.
 Sign in, or Signin
  • Log out - MUST be 2 words and "out" is lowercase when it's an action.
  • Logout - Used as 1 word when it's a noun or adjective.
 Logoff, Log off, Signout, or Sign out
Username - MUST be 1 word. User name
## Accessibility ### General accessibility - Make sure the `type` attribute has the correct value. By default, this is set to `submit` but in most you’ll need to set this to `button` to prevent unwanted behavior when pressed. #### Links vs. buttons Links and buttons are read differently when using a screen reader. In its most basic form, the rules are: - If it goes somewhere, use a link in the form of ``. - If it does something on the page such as submitting a form, opening a dialog, canceling an action, or deleting an item, then use a button in the form of `