Icon Button - Usage

Basic Guidelines

Any Skycon can be used, but as the button doesn’t hold any additional text or explanation, the icon and the button’s associated action need to be clear and unambiguous.

Variants Usage

The Icon Button is used in other components already:

• Accordion
• Carousel
• Modal
• Notification

Variant: Minimal

The minimal variant is used when only a subtle button is necessary. Either because there is enough contrast between the background and the icon or it sits within another frame (like on Accordions or Modals without images).

Variant: Solid

The solid variant is used when the Icon Button needs to stand out against a busy background.

Appearance: Light

The light (minimal) appearance is used on top of dark backgrounds when the Default version does not provide enough contrast.

The light (solid) appearance is used when a white button would draw too much attention, or as controls for dark interfaces.

State: Disabled

We don’t recommend using the disabled status of the Icon Button, because of usability and accessibility concerns. There should generally be no need for it.

One edge case however are Icon Buttons for navigation if the content is not set up to loop:

Alignment

Icon Buttons can be grouped horizontally or vertically.

Small Icon Buttons require a larger gap than the medium sized ones, to provide a hit area big enough on mobile devices. Any clickable item needs to have a minimum height/width of 44px, to comply with accessibility standards. However, no additional design adjustments are necessary for the small Icon Button (32x32px), as this is already reflected in the equivalent React component.

Padding

When used within other containers, make sure there is enough padding (8px) around the Icon Button, to provide enough space for the focus ring.

Color Usage

Please don’t change the colour of the icon or button — the Default and Light appearance of the Icon Button are defined states.