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

React implementation of Neo4j Design System

# DropdownButton

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

## Props

### DropdownButton

| 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 button |
| `isDisabled` | `boolean` |  | `false` | Whether the button is in disabled state |
| `isFloating` | `boolean` |  | `false` | Whether the button is in floating state |
| `isLoading` | `boolean` |  | `false` | If the button is loading. Will display a loading spinner |
| `isOpen` | `boolean` |  | `false` | If the dropdown is activated |
| `leadingElement` | `ReactNode` |  |  | Element that is shown before the button content |
| `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` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |

Make sure to set `isOpen` to the corresponding state of the Menu that is being opened by the DropdownButton. That makes sure proper styling and aria attributes are applied to reflect the state.

## Examples

### Default

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

import { DropdownButton } from '@neo4j-ndl/react';

const Component = () => {
  return <DropdownButton>Dropdown Button</DropdownButton>;
};

export default Component;
```

### Disabled

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

import { DropdownButton } from '@neo4j-ndl/react';

const Component = () => {
  return <DropdownButton isDisabled={true}>Dropdown Button</DropdownButton>;
};

export default Component;
```

### Floating

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

import { DropdownButton } from '@neo4j-ndl/react';

const Component = () => {
  return <DropdownButton isFloating={true}>Dropdown Button</DropdownButton>;
};

export default Component;
```

### Loading

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

import { DropdownButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <DropdownButton isLoading loadingMessage="Loading">
      Dropdown Button
    </DropdownButton>
  );
};

export default Component;
```

### With Avatar

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

import { Avatar, DropdownButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <DropdownButton
      leadingElement={<Avatar name="KM" type="icon" shape="square" />}
    >
      Dropdown Button
    </DropdownButton>
  );
};

export default Component;
```

### With Menu

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

import { DropdownButton, Menu } from '@neo4j-ndl/react';
import { useRef, useState } from 'react';

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

  return (
    <div>
      <DropdownButton
        isOpen={isMenuOpen}
        onClick={() => setIsMenuOpen((old) => !old)}
        ref={anchorRef}
      >
        Dropdown Button
      </DropdownButton>
      <Menu
        isOpen={isMenuOpen}
        anchorRef={anchorRef}
        onClose={() => setIsMenuOpen(false)}
      >
        <Menu.Item title="Action 1" />
        <Menu.Item title="Action 2" />
        <Menu.Item title="Action 3" />
        <Menu.Item title="Action 4" />
      </Menu>
    </div>
  );
};

export default Component;
```

### With Status Indicator

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

import { DropdownButton, StatusIndicator } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <DropdownButton leadingElement={<StatusIndicator variant="info" />}>
      Dropdown Button
    </DropdownButton>
  );
};

export default Component;
```