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 (default), and large. It should be fully styled in accordance with the currently selected theme.

API

igxIconButton - Set the type of igxIconButton to be used. The default is set to contained.

Test scenarios

Should set the icon button size (small, medium, large) correctly.
Should apply correct CSS classes to the element for all icon button types (flat, outlined, contained).
Should apply correct CSS classes and attributes to the element when the icon button is disabled.