Icon Button Specification

Icon Button

Overview

The igxIconButton is a directive that wraps a native <button> element and provides a way to use an icon as a fully functional button.

<button igxIconButton='outlined'>
  <igx-icon>home</igx-icon>
</button>

Acceptance criteria

The icon button should support different types - flat, outlined, and contained.
The icon button should support disabled state.
The icon button should support sizing through a CSS variable.
The icon button should be accessible with both keyboard and mouse devices.

User Stories

Developer stories

As a developer, I expect to be able to initialize an icon button using the igxIconButton directive.
As a developer, I expect to be able to set a different type to control the visual style of the element.
As a developer, I expect to be able to set a disabled state to the icon button.
As a developer, I expect to be able to customize the size and appearance of the icon button.

End-user stories

As an end-user, I expect to be able to click an icon button that performs an action.
As an end-user, I expect to be able to click an icon button that navigates to a URL.
As an end-user, I expect to have distinct visual indications reflecting the different states of the component (disabled, focused, etc.).
As an end-user, I expect to be able to interact with the element with a keyboard and with a pointer device.

Functionality

The icon button comes in 3 different types - flat, outlined, contained (default), and with 3 different sizes - small, medium, and large. It should be fully styled in accordance with the currently selected theme.