Components

Button - Icon

Also known as: Button - Tertiary

Use with caution: Candidate

USWDS v3

The button icon variation acts as a tertiary button which has equal visual prominence to Link - Action and thus can be used in contexts that require a mix of links and buttons.

Examples

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.

Accessibility considerations

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