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

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

# IconButtonToggle

The component combines the functionality of an IconButton and two conditionally toggled Icons.
It uses [Icon](./?path=/story/components-icon--default) component under the hood and users can change its property via `iconProps` prop.

### Required Components

This component can be used independently and does not require additional components.  

### 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 component. |
| Tab | Focuses the component and follows the page tab sequence. |

#### Screen Readers

This component uses the following attributes to assist screen readers:
- This component uses the **`aria-label`** to provide an accessible name, which toggles based on the toggle state.
- The **`aria-labelledby`** attribute is used to provide the label ID.