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

React implementation of Neo4j Design System

# CleanIconButton

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

## Props

### CleanIconButton

| 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 |
| `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

A CleanIconButton must have the `tooltip` prop set for it to be accessible. The tooltip text is used as the aria-label for screen readers. CleanIconButtons 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 { CleanIconButton } from '@neo4j-ndl/react';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

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

export default Component;
```

### Active

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

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

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

export default Component;
```

### All

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

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

const Component = () => {
  return (
    <div className="n-grid n-grid-cols-[auto_auto_auto_auto] n-gap-token-32 n-place-items-center n-w-fit">
      {/* size row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Size
      </Typography>
      <IconButton description="Size example" size="small">
        Small
      </IconButton>
      <IconButton description="Size example" size="medium">
        Medium
      </IconButton>
      <IconButton description="Size example" size="large">
        Large
      </IconButton>

      {/* tone row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Tone
      </Typography>
      <IconButton description="Grouped example" tone="default">
        <ArrowDownTrayIconOutline />
      </IconButton>
      <IconButton description="Grouped example" tone="danger">
        <ArrowDownTrayIconOutline />
      </IconButton>
      <div></div>
      <div></div>

      {/* isDisabled Row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Disabled
      </Typography>
      <IconButton description="Disabled example" isDisabled>
        <ArrowDownTrayIconOutline />
      </IconButton>
      <div></div>
      <div></div>

      {/* isLoading Row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Loading
      </Typography>
      <IconButton description="Loading example" isLoading>
        <ArrowDownTrayIconOutline />
      </IconButton>
      <div></div>
      <div></div>

      {/* isFloating row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Floating
      </Typography>
      <IconButton description="Floating example" isFloating>
        <ArrowDownTrayIconOutline />
      </IconButton>
      <div></div>
      <div></div>

      {/* isGrouped row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Grouped
      </Typography>
      <IconButton description="Grouped example" isGrouped>
        <ArrowDownTrayIconOutline />
      </IconButton>
      <div></div>
      <div></div>

      {/* isActive row */}
      <Typography variant="subheading-small" className="n-justify-self-end">
        Active
      </Typography>
      <IconButton description="Active example" isActive>
        <ArrowDownTrayIconOutline />
      </IconButton>
      <div></div>
      <div></div>
    </div>
  );
};

export default Component;
```

### Disabled

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

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

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

export default Component;
```

### Keyboard Display

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

import { CleanIconButton } 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">
        <CleanIconButton
          description="Search"
          descriptionKbdProps={{ keys: ['B'], modifierKeys: ['meta'] }}
          variant="neutral"
        >
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
      </div>
    </div>
  );
};

export default Component;
```

### Loading

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

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

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

export default Component;
```

### Sizes

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

import { CleanIconButton, 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">
        <CleanIconButton description="Search" size="small">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <Typography variant="label"> Small</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <CleanIconButton description="Search" size="medium">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <Typography variant="label"> Medium</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <CleanIconButton description="Search" size="large">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <Typography variant="label"> Large</Typography>
      </div>
    </div>
  );
};

export default Component;
```

### Tone

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

import { CleanIconButton, 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">
        <CleanIconButton description="Search" variant="neutral">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <Typography variant="label">Default</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <CleanIconButton description="Search" variant="danger">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <Typography variant="label">Danger</Typography>
      </div>
    </div>
  );
};

export default Component;
```