import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks';
import  * as IconButtonStories from './IconButton.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';


<Meta isTemplate />

# IconButton

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/IconButton)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/button/usage)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Kind](#kind)
- [Alignment](#alignment)
- [Customizing the label](#customizing-the-label)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

The `IconButton` component is useful when you have a button where the content is
an icon. In this situation, it's important that the button itself is labeled in
a way that can be understandable by mouse, keyboard, and screen readers. As a
result, this component makes it easy to create accessible icon buttons

```jsx
import { IconButton } from '@carbon/react';
import { Add } from '@carbon/react/icons';

function ExampleComponent() {
  return (
    <IconButton label="Add">
      <Add />
    </IconButton>
  );
}
```
<Canvas
  of={IconButtonStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(IconButtonStories.Default),
    },
  ]}
/>

## Kind

Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
most commonly will be styled as primary or ghost buttons. Icon only buttons do
not support Danger, Danger tertiary, or Danger ghost.

## Alignment

The `align` prop allows you to specify where your content should be placed
relative to the `IconButton`. For example, if you provide `align="top"` to the
`IconButton` component then the tooltip will render above your component.
Similarly, if you provide `align="bottom"` then the tooltip will render below
your component.

## Customizing the label

You can customize the label, or tooltip, of the `IconButton` with the `label`
prop. However, it's important that this label contain no interactive content so
that the component remains accessible.

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/IconButton/IconButton.mdx).
