Home

Icon Button

UsageDevelopment

About

An Icon button allows users to perform an action using a compact, visually intuitive control. Riverty Design System offers a standard and a contained Icon button in both small, medium and large sizes.

Anatomy

An Icon button may consists of:

  1. Icon
  2. Tooltip (optionally visible when hovering)
  3. Background (for Contained variant only)

Icon button anatomy Icon button anatomy Icon button anatomy Icon button anatomy

When to use

Use an Icon button when:

  • The icon is interactive, so it allows users to click or activate it.
  • There´s not much space for using a regular Button component and you need a compact alternative.

When not to use

Do not use an Icon button when:

  • The icon is not interactive but just adds visual support. Use an Icon component instead.
  • There’s space for using the Button component that by default includes a label. This is more accessible.

Variants

Riverty Design System includes two variants of Icon button:

  • Standard: used in default use cases;
  • Contained: used in use cases of a floating or overlay icon button.

Sizes

Riverty Design System includes three sizes of Icon buttons:

Small (S)

  • Icon size: 16 x 16 pixels;
  • Overall size: 24 x 24 pixels;
  • Usage: preferably to be used within components only. Or very small interfaces.

Medium (M)

  • Icon size: 24 x 24 pixels;
  • Overall size: 36 x 36 pixels;
  • Usage: to be used as stand-alone icon buttons in smaller interfaces.

Large (L)

  • Icon size: 32 x 32 pixels;
  • Overall size: 44 x 44 pixels;
  • Usage: to be used as stand-alone icon buttons in larger interfaces. However, if there’s space to use a regular button with a label this should be used to enhance accessibility.

Behaviour

States Both Standard and Contained Icon buttons come with the following states: Enabled, Hovered, Focused, Activated, Disabled.

Keyboard behaviour Users are able to activate a button using the Enter key.

Toggle behaviour Icon buttons can also be used for allowing to toggle between two states. In that sense, you would use two icons that have an oppositive meaning. Interacting with one icon in a certain state switches to the opposite icon and therefore opposite state.

Do use toggle behaviour for use cases such as password inputs, in which an open eye stands for ‘show password’ and a closed eye for ‘hide password’.

Accessibility

Tooltip A Tooltip has been added to the component automatically, and the label should describe the action that users will take when interacting with the Icon button.

Aria label Each Icon button needs an Aria label, which is the text that will be read to users using a screen reader to understand your design. This Aria label should, like the Tooltip label, describe the action that users will take when interacting with the Icon button.

Icon button with tooltip explaining onclick action
Do use a label that explains the action that users will take when interacting with the Icon button.
Do

Icon button with tooltip explaing icon
Do not use the Figma name for an Icon button when that does not describe the action it allows for.
Don’t

Target area According to WCAG 2.0, the target area for mobile devices has to be 44 x 44 pixels. This is the clickable area around an UI element on mobile.

This target area size is a bit challenging for when you’re using several Icon buttons close next to each other.The icon does not have to be in middle of the target area. Therefore, you can experiment with the placements of these target areas. We for example did this with input field, see our example below.

Icon button with tooltip explaing icon

Nesting components

An Icon button component can use:

  • Icon component

An Icon button is used in:

  • Alert
  • Dialog
  • Input
  • List item
  • Popover
  • Select
  • Toast
  • Text area

Resources