import { Meta } from '@storybook/addon-docs'
import { DocHeaderLinks } from '../../../docs/blocks/DocHeaderLinks'

<Meta title="FORM COMPONENTS/IconButton/Design Specification" />

# IconButton

The IconButton allows you to have interactive icons.

<DocHeaderLinks demoUrl="/?path=/story/form-components-iconbutton-code-examples--icon-button-sandbox" figmaUrl="https://www.figma.com/file/YgF3zfnpIDwCZDlwUEP4GR/Kyper---MX-Global-Styles?node-id=21262%3A29106"/>

![Icon button preview](/button/doc/assets/iconbutton-preview.png)

## Overview

Use this component when you need an icon to be interactive. There are a few considerations when using the IconButton:

1. On mobile devices the tap target needs to be 44x44px to pass WCAG 2.1 spec. You may need to adjust padding and margin on the icon button to meet this requirement.
2. On desktop there is no size requirement WCAG, however we shouldn't go below 16x16px. 
3. Icons have a contrast requirement of 3:1 to pass WCAG 2.0 spec.