> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# MenuPicker

> A compact icon button with selected styling and an optional tooltip.

`MenuPicker` renders a native button. Your application owns `selected` and the action. `selected` also controls `aria-pressed`.

```tsx theme={null}
import { useState } from 'react';
import { MenuPicker } from 'twenty-ui/components';
import { IconLayoutKanban } from 'twenty-ui/icon';

export const BoardToggle = () => {
  const [selected, setSelected] = useState(false);

  return (
    <MenuPicker
      id="board-toggle"
      icon={IconLayoutKanban}
      label="Board view"
      selected={selected}
      onClick={() => setSelected(!selected)}
    />
  );
};
```

Keep `label` even with `showLabel={false}` because it supplies the accessible name. `tooltipContent` adds a supplementary explanation. `disabled` prevents activation. Place the button outside a form unless its default native submission behavior is appropriate.

## Props

<ParamField body="className" type="string">
  Class applied to the button.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Disables the button.
</ParamField>

<ParamField body="icon" type="IconComponent" required>
  Leading icon component.
</ParamField>

<ParamField body="id" type="string" required>
  Button ID.
</ParamField>

<ParamField body="label" type="string">
  Button label and accessible name, including when showLabel is false.
</ParamField>

<ParamField body="onClick" type="(() => void)">
  Activation callback.
</ParamField>

<ParamField body="selected" type="boolean" default="false">
  Controls selected styling and aria-pressed.
</ParamField>

<ParamField body="showLabel" type="boolean" default="true">
  Shows the visible label beside the icon.
</ParamField>

<ParamField body="testId" type="string">
  Value of the button’s data-testid attribute.
</ParamField>

<ParamField body="tooltipContent" type="string">
  Optional tooltip text.
</ParamField>

<ParamField body="tooltipDelay" type="number" default="0">
  Hover delay in milliseconds.
</ParamField>

<ParamField body="tooltipOffset" type="number" default="5">
  Distance between the button and tooltip in pixels.
</ParamField>