import { Meta } from '@storybook/addon-docs';

<Meta title="Components/IconButton/IconButton" />

# IconButton

The component combines the functionality of a [Button](./?path=/docs/components-button--default) and an [Icon](./?path=/story/components-icon--default). 
This component applies specific styles necessary for icons and changes the behavior pattern for buttons and ensures compatibility across browsers and devices. 

IconButtons should:
- Use meaningful symbols that represent a basic idea or concept.
- Include a title rendered as a tooltip when more descriptive information is needed.
- Use an **aria-label** or **aria-labelledby** attribute to provide a label or label ID.

IconButtons should not include anything other than an [Icon](.?path=/docs/components-icon--default) as a child component. If you need to pair an icon with text inside a button, review the [Button](./?path=/docs/components-button--default) component.

### Required Components

This component requires the [Icon](./?path=/story/components-icon--default) component. 

### Accessibility
This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.

#### Keyboard Navigation

| Key | Functions |
| ---- | ---- |
| Space or Enter | Selects the icon button. |
| Tab | Focuses the icon button and follows the page tab sequence. |

#### Screen Readers

This component uses the **`aria-label`** to provide an accessible name.