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

React implementation of Neo4j Design System

# SelectIconButton

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

## Props

### SelectIconButton

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` |  |  | Content displayed in the button |
| `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} |
| `isDisabled` | `boolean` |  | `false` | Whether the button is in disabled state |
| `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
| `isOpen` | `boolean` |  | `false` | If the button is opened |
| `loadingMessage` | `string` |  | `Loading` | Accessible message for screen readers when the button is in a loading state |
| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function to be called when the button is clicked |
| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
| `tooltipProps` | `TooltipObjectProps` |  |  | Props for the tooltip component. |

## Examples

### Default

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

import { SelectIconButton } from '@neo4j-ndl/react';
import { SelectIcon } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <SelectIconButton description="Select" isOpen={false}>
      <SelectIcon />
    </SelectIconButton>
  );
};

export default Component;
```

### Sizes

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

import { SelectIconButton, Typography } from '@neo4j-ndl/react';
import { SelectIcon } 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">
        <SelectIconButton description="Select" size="small" isOpen={false}>
          <SelectIcon />
        </SelectIconButton>
        <Typography variant="label"> Small</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <SelectIconButton description="Select" size="medium" isOpen={false}>
          <SelectIcon />
        </SelectIconButton>
        <Typography variant="label"> Medium</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <SelectIconButton description="Select" size="large" isOpen={false}>
          <SelectIcon />
        </SelectIconButton>
        <Typography variant="label"> Large</Typography>
      </div>
    </div>
  );
};

export default Component;
```

### States

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

import { SelectIconButton, Typography } from '@neo4j-ndl/react';
import { SelectIcon } 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">
        <SelectIconButton
          description="Select"
          size="small"
          isDisabled
          isOpen={false}
        >
          <SelectIcon />
        </SelectIconButton>
        <Typography variant="label"> Disabled</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <SelectIconButton description="Select" size="small" isOpen={true}>
          <SelectIcon />
        </SelectIconButton>
        <Typography variant="label"> Active</Typography>
      </div>
      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
        <SelectIconButton
          description="Select"
          size="small"
          isLoading
          loadingMessage="Loading"
          isOpen={false}
        >
          <SelectIcon />
        </SelectIconButton>
        <Typography variant="label"> Loading</Typography>
      </div>
    </div>
  );
};

export default Component;
```

### With Menu

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

import { Menu, SelectIconButton } from '@neo4j-ndl/react';
import {
  ExploreIcon,
  HierarchyTwoIcon,
  SelectIcon,
} from '@neo4j-ndl/react/icons';
import { useRef, useState } from 'react';

const menuItems = [
  { leadingVisual: <ExploreIcon />, title: 'Force-based layout' },
  { leadingVisual: <HierarchyTwoIcon />, title: 'Hierarchical layout' },
];

const Component = () => {
  const anchorRef = useRef<HTMLButtonElement | null>(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<number>();

  return (
    <div>
      <SelectIconButton
        description="Options"
        isOpen={isMenuOpen}
        onClick={() => setIsMenuOpen((old) => !old)}
        ref={anchorRef}
      >
        {selectedItem !== undefined ? (
          menuItems[selectedItem].leadingVisual
        ) : (
          <SelectIcon />
        )}
      </SelectIconButton>
      <Menu
        isOpen={isMenuOpen}
        anchorRef={anchorRef}
        onClose={() => setIsMenuOpen(false)}
      >
        {menuItems.map((item, index) => (
          <Menu.RadioItem
            key={index}
            isChecked={selectedItem === index}
            title={item.title}
            leadingVisual={item.leadingVisual}
            onClick={() => setSelectedItem(index)}
          />
        ))}
      </Menu>
    </div>
  );
};

export default Component;
```