@neo4j-ndl/react/skills/ndl-react/components/icon-button.md

React implementation of Neo4j Design System

# IconButton

Import: `import { IconButton } from '@neo4j-ndl/react'`

## Props

### IconButton

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `children` | `ReactNode` |  |  |  |
| `description` | `string \| null` | ✅ |  | A string that will be shown as a tooltip when hovering over the button it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} |
| `descriptionKbdProps` | `(KbdProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>)` |  |  | The Kbd components that will be displayed in the tooltip after the description text, this does not include the keyboard shortcut functionality this only displays the Kbd components. |
| `isActive` | `boolean` |  |  | Active - used for open context menus for example |
| `isDisabled` | `boolean` |  | `false` | If the icon button is in disabled state |
| `isFloating` | `boolean` |  | `false` | If the button is in floating state |
| `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
| `loadingMessage` | `string` |  |  | Accessible message for screen readers when the button is in a loading state |
| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Click handler |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
| `tooltipProps` | `TooltipObjectProps` |  |  | Props for the tooltip component. |
| `variant` | `'danger' \| 'neutral'` |  | `neutral` | Variant of the button |

## Accessibility

## Implementation guidelines

An IconButton must have the `description` prop set for it to be accessible. The description is used as the aria-label for screen readers, unless aria-label is set manually. IconButtons are interactive elements that allow users to trigger actions with either `Space` or `Enter`. Try to avoid disabling buttons since they are removed from the accessibility tree. Instead, give the user feedback on the action.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <IconButton description="Search">
      <MagnifyingGlassIconOutline />
    </IconButton>
  );
};

export default Component;
```

### Active

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <IconButton description="Search" isActive>
      <MagnifyingGlassIconOutline />
    </IconButton>
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <IconButton description="Search" isDisabled>
      <MagnifyingGlassIconOutline />
    </IconButton>
  );
};

export default Component;
```

### Floating

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <IconButton description="Search" isFloating>
      <MagnifyingGlassIconOutline />
    </IconButton>
  );
};

export default Component;
```

### Loading

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <IconButton description="Search" isLoading loadingMessage="Loading">
      <MagnifyingGlassIconOutline />
    </IconButton>
  );
};

export default Component;
```

### Sizes

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton, Typography } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-16">
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <IconButton description="Search" size="small">
          <MagnifyingGlassIconOutline />
        </IconButton>
        <Typography variant="label"> Small</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <IconButton description="Search" size="medium">
          <MagnifyingGlassIconOutline />
        </IconButton>
        <Typography variant="label"> Medium</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <IconButton description="Search" size="large">
          <MagnifyingGlassIconOutline />
        </IconButton>
        <Typography variant="label"> Large</Typography>
      </div>
    </div>
  );
};

export default Component;
```

### Tone

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { IconButton, Typography } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-16">
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <IconButton description="Search" variant="neutral">
          <MagnifyingGlassIconOutline />
        </IconButton>
        <Typography variant="label">Default</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <IconButton description="Search" variant="danger">
          <MagnifyingGlassIconOutline />
        </IconButton>
        <Typography variant="label">Danger</Typography>
      </div>
    </div>
  );
};

export default Component;
```