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

React implementation of Neo4j Design System

# IconButtonArrayComponent

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

## Props

### IconButtonArrayComponent

| 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` | ✅ |  | Content displayed in the icon button array |
| `isFloating` | `boolean` |  | `false` | Whether the icon button array is floating |
| `orientation` | `'horizontal' \| 'vertical'` |  | `horizontal` | Orientation of the icon button array |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of the icon button array |

### IconButtonArray.CollapsibleButtonWrapper

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactElement<CleanIconButtonButtonProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>, string \| JSXElementConstructor<...>> \| ReactElement<...>[]` | ✅ |  | Icon buttons to be displayed in the collapsible button wrapper |

## Examples

### Collapsible

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

import { CleanIconButton, IconButtonArray } from '@neo4j-ndl/react';
import {
  FunnelIconOutline,
  MagnifyingGlassIconOutline,
  PencilIconOutline,
  UserCircleIconOutline,
} from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <IconButtonArray orientation="horizontal" size="medium">
      <CleanIconButton description="Search">
        <MagnifyingGlassIconOutline />
      </CleanIconButton>
      <CleanIconButton description="Filter">
        <FunnelIconOutline />
      </CleanIconButton>
      <IconButtonArray.CollapsibleButtonWrapper>
        <CleanIconButton description="User">
          <UserCircleIconOutline />
        </CleanIconButton>
        <CleanIconButton description="Edit">
          <PencilIconOutline />
        </CleanIconButton>
      </IconButtonArray.CollapsibleButtonWrapper>
    </IconButtonArray>
  );
};

export default Component;
```

### Floating

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

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

const Component = () => {
  return (
    <IconButtonArray orientation="horizontal" isFloating={true} size="medium">
      <CleanIconButton description="Search">
        <MagnifyingGlassIconOutline />
      </CleanIconButton>
      <CleanIconButton description="Filter">
        <FunnelIconOutline />
      </CleanIconButton>
    </IconButtonArray>
  );
};

export default Component;
```

### Horizontal

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

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

const Component = () => {
  return (
    <IconButtonArray orientation="horizontal" size="medium">
      <CleanIconButton description="Search">
        <MagnifyingGlassIconOutline />
      </CleanIconButton>
      <CleanIconButton description="Filter">
        <FunnelIconOutline />
      </CleanIconButton>
    </IconButtonArray>
  );
};

export default Component;
```

### Sizes

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

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

const Component = () => {
  return (
    <div className="n-flex n-items-start n-gap-token-16">
      <IconButtonArray orientation="horizontal" size="small">
        <CleanIconButton description="Search">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <CleanIconButton description="Filter">
          <FunnelIconOutline />
        </CleanIconButton>
      </IconButtonArray>
      <IconButtonArray orientation="horizontal" size="medium">
        <CleanIconButton description="Search">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <CleanIconButton description="Filter">
          <FunnelIconOutline />
        </CleanIconButton>
      </IconButtonArray>
      <IconButtonArray orientation="horizontal" size="large">
        <CleanIconButton description="Search">
          <MagnifyingGlassIconOutline />
        </CleanIconButton>
        <CleanIconButton description="Filter">
          <FunnelIconOutline />
        </CleanIconButton>
      </IconButtonArray>
    </div>
  );
};

export default Component;
```

### Vertical

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

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

const Component = () => {
  return (
    <IconButtonArray orientation="vertical" size="medium">
      <CleanIconButton description="Search">
        <MagnifyingGlassIconOutline />
      </CleanIconButton>
      <CleanIconButton description="Filter">
        <FunnelIconOutline />
      </CleanIconButton>
    </IconButtonArray>
  );
};

export default Component;
```