Icon Button

Icons buttons are subtle triggers for actions. They are visual, clickable elements that represent and provide access to functions, commands, files, devices or directories, as well as common actions.

On this page

Use Cases

Icon Button

The user should be able to:

  • Take an action for example deleting an item or opening a modal.
  • Have enough contrast on light and dark backgrounds to see the button
  • Navigate to and interact with buttons with keyboard

Icon Toggle Button

The user should be able to:

  • Take turn on and off an action for example bookmarking or favouriting.
  • Have enough contrast on light and dark backgrounds to see the button
  • Navigate to and interact with buttons with keyboard

Interaction and Style

Relevant WCAG Requirements

  • Non-text Content

    Provide text alternatives for all non-text content. This includes images, buttons, form inputs, maps, etc. Text alternatives allow screen readers to describe these elements to visually impaired users.

    WCAG 2.1 Understanding 1.1.1

  • Use of Color

    Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    WCAG 2.1 Understanding 1.4.1

  • Keyboard

    Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.

    WCAG 2.1 Understanding 2.1.1

  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

Keyboard Navigation

KeyAction
TabFocuses the icon button.
Enter/SpacebarActivates the icon button.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.