Icon Button

Overview

View on FigmaView on GitHub

Purpose

The Icon Button provides a clickable container for a Skycon, and helps users take supplementary actions. The Icon Button is used to display an action in a compact layout.

Anatomy

The Icon Button component can be broken down into the following elements -

  1. 1
  2. 2

  1. Bounding Box

    The bounding box provides a container for the icon.

  2. Icon

    Icons are drawn from the Skycons suite.

Variants & States

  • Appearance: Default, Light
  • Variants: Solid, Minimal
  • States: Default, Hover, Focus, Disabled
  • Size: Small, Medium, Large
DefaultLight
Solid
Minimal