Button - Icon

Also known as: Button - Tertiary

USWDS v3

Examples

Change file

View Change file, used in the File input component in Storybook

Delete

View Delete, used in the File input component in Storybook

Cancel

View va-button-icon cancel variation in Storybook

Usage

When to use Button - Icon

• In a Card or other container alongside a primary link. This component is mainly intended to sit alongside a primary link, typically a Link - Active variation, within a Card. This allows the link to visually have the affordance as the primary action and the Button - Icon the affordance of a secondary action.

When to consider something else

• When a secondary button will suffice. Button - Icon does not replace the Button - Secondary. Only use Button - Icon when Button - Secondary would visually dwarf a link primary action.

How this component works

• Icon plus uppercase label. These buttons are composed of an icon and an uppercase label. The label is a verb that represents an action that the user is taking. Because the visual style of this button uses uppercase text, labels must be very concise actions and thus are limited to one or two words only. For example, “Change file”, “Delete”, and “Cancel”.

Requesting new instances

The 3 examples above are the only currently approved instances of this component. Use of icons in buttons of any type will be made on a case-by-case basis. If you feel you need an icon for a button, follow the process for requesting a new icon and indicate that you would like to use it in Button - Icon or another button type.

Content considerations

• Delete is preferred to remove. We prefer words that describe exactly what will happen when you tap or click. Note: Currently, icon and button labels are hard-coded into the component. New icons and labels must be requested following the instructions above.

Button labels

Buttons signal important calls to action (CTA) and help people quickly see what’s the most important action they need to take on a page. Treat buttons like important or primary content, and prioritize their placement on pages as you would essential information.

For simple navigation to lead people between pages, use links instead of buttons.

• Use sentence case for button labels (except for Button - Icon).
• Make button labels as short as possible.
• Use “action words” that people recognize and clearly signal what will happen when they click the button.
• Keep the character limit for button labels to 35 characters. 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, “Back” or “Continue”).

• Make it an action.

• Always take users to the right level of access for the CTA.
  • Like this: “Explore VA health care” button should take you to a general health care benefits landing page like VA health care.
  • Like this: “Apply for VA health care” button should take you to an application page like Apply for VA healthcare.
  • Like this: “Compare GI Bill benefits” button should take you right to the GI Bill® Comparison Tool.

Accessibility considerations

• Follow button considerations. This component should follow the same considerations as a typical button.