> ## 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.

# ListItemButton

> Native action buttons with the shared list row appearance.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

Use `ListItemButton` for action rows and standalone selection buttons. It combines [ListItem](/ui/primitives/navigation/list-item) layout with a native button, including Enter and Space activation, focus, and disabled behavior. It defaults to `type="button"`.

<StoryEmbed storyId="ui-components-listitembutton--default" title="ListItemButton example" height={180} />

## Actions and disabled state

Pass `onClick` and `disabled` directly. Disabled buttons use the matching row appearance, prevent activation, and leave the tab order.

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { IconCopy } from 'twenty-ui/icon';

type DuplicateActionProps = {
  onDuplicate: () => void;
  disabled?: boolean;
};

export const DuplicateAction = ({
  onDuplicate,
  disabled = false,
}: DuplicateActionProps) => (
  <ListItemButton
    disabled={disabled}
    onClick={onDuplicate}
    startIcon={<IconCopy />}
    description="Create a copy"
  >
    Duplicate
  </ListItemButton>
);
```

<StoryEmbed storyId="ui-components-listitembutton--disabled" title="Disabled action row" height={180} />

Set `focusableWhenDisabled` to keep a disabled button focusable. It uses `aria-disabled` and continues to block activation. Native button attributes, events, styles, class names, and an `HTMLButtonElement` ref reach the button. Events bubble normally; callers supply any `stopPropagation()` or `preventDefault()` policy.

## Selection and visual slots

Your application owns selection. Pair `selected` with the appropriate accessible state, such as `aria-pressed` for a toggle button. `focused` highlights the row without moving DOM focus. Indicators and shortcut hints are decorative; your application registers shortcuts and handles navigation.

```tsx theme={null}
import { useState } from 'react';
import { ListItemButton } from 'twenty-ui/components/navigation';

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

  return (
    <ListItemButton
      aria-pressed={selected}
      selected={selected}
      indicator="check"
      onClick={() => setSelected(!selected)}
    >
      Show archived records
    </ListItemButton>
  );
};
```

<StoryEmbed storyId="ui-components-listitembutton--selected" title="Selected action row" height={180} />

Use `startIcon`, `endIcon`, `description`, and `descriptionPlacement` for supporting content. `color="danger"` marks a destructive action. `shortcutJoinLabel` controls the text between sequential shortcuts, and `hasSubmenu` displays a submenu indicator.

## Independent controls

Keep independent buttons beside `ListItemButton` so each retains its own focus and activation. The component has no `actions` slot. Use a passive `ListItem` with `actions` when the row itself does not act.

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { Button } from 'twenty-ui/primitives/input';

type ContactActionsProps = {
  onOpen: () => void;
  onDetails: () => void;
};

export const ContactActions = ({ onOpen, onDetails }: ContactActionsProps) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <ListItemButton onClick={onOpen} description="Account owner">
      Alex Morgan
    </ListItemButton>
    <Button onClick={onDetails} aria-label="Open Alex Morgan's details">
      Details
    </Button>
  </div>
);
```

<StoryEmbed storyId="ui-components-listitembutton--independent-action" title="Sibling action controls" height={180} />

Use `ListItem` for passive content, links, or custom semantic owners. Use the existing [Menu](/ui/primitives/surfaces/menu), [Dropdown](/ui/components/navigation/dropdown), and [Select](/ui/primitives/input/select) item parts within their popup owners, which supply roles and keyboard navigation.

## Props

<ParamField body="color" type="&#x22;danger&#x22; | &#x22;neutral&#x22;">
  Color of the text and icons. `danger` marks a destructive action.
</ParamField>

<ParamField body="description" type="ReactNode">
  Supporting text, placed according to `descriptionPlacement`.
</ParamField>

<ParamField body="descriptionPlacement" type="&#x22;end&#x22; | &#x22;inline&#x22;">
  Where the description renders: inline after the content or at the end of
  the row.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Disables activation and applies the matching row appearance.
</ParamField>

<ParamField body="endIcon" type="ReactNode">
  Icon rendered after the content.
</ParamField>

<ParamField body="focusableWhenDisabled" type="boolean" default="false">
  Keeps a disabled button focusable with aria-disabled while preventing activation.
</ParamField>

<ParamField body="focused" type="boolean">
  Highlights the row without moving DOM focus.
</ParamField>

<ParamField body="hasSubmenu" type="boolean">
  Displays a decorative submenu indicator.
</ParamField>

<ParamField body="indicator" type="&#x22;check&#x22; | &#x22;checkbox&#x22; | &#x22;none&#x22;">
  Selection indicator: a check icon after the content or a checkbox before
  it.
</ParamField>

<ParamField body="ref" type="Ref<HTMLButtonElement>">
  Ref to the native HTMLButtonElement.
</ParamField>

<ParamField body="selected" type="boolean">
  Applies selected styling and a decorative indicator. The caller supplies selection state and accessible semantics.
</ParamField>

<ParamField body="shortcut" type="ShortcutDefinition">
  Displays decorative shortcut hints. The caller registers the shortcuts.
</ParamField>

<ParamField body="shortcutJoinLabel" type="string">
  Text between sequential shortcut steps. Defaults to `then`; pass an empty string to omit it.
</ParamField>

<ParamField body="startIcon" type="ReactNode">
  Icon rendered before the content.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.