ListItemButton

Use ListItemButton for action rows and standalone selection buttons. It combines ListItem layout with a native button, including Enter and Space activation, focus, and disabled behavior. It defaults to type="button".

Actions and disabled state

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

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>
);

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.

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>
  );
};

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.

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>
);

Use ListItem for passive content, links, or custom semantic owners. Use the existing Menu, Dropdown, and Select item parts within their popup owners, which supply roles and keyboard navigation.

Props

"danger" | "neutral"

Color of the text and icons. danger marks a destructive action.

ReactNode

Supporting text, placed according to descriptionPlacement.

"end" | "inline"

Where the description renders: inline after the content or at the end of the row.

boolean

default:"false"

Disables activation and applies the matching row appearance.

ReactNode

Icon rendered after the content.

boolean

default:"false"

Keeps a disabled button focusable with aria-disabled while preventing activation.

boolean

Highlights the row without moving DOM focus.

boolean

Displays a decorative submenu indicator.

"check" | "checkbox" | "none"

Selection indicator: a check icon after the content or a checkbox before it.

Ref<HTMLButtonElement>

Ref to the native HTMLButtonElement.

boolean

Applies selected styling and a decorative indicator. The caller supplies selection state and accessible semantics.

ShortcutDefinition

Displays decorative shortcut hints. The caller registers the shortcuts.

string

Text between sequential shortcut steps. Defaults to then; pass an empty string to omit it.

ReactNode

Icon rendered before the content.

Overview

Apps

API

Self-Host

Contribute

UI Library

Actions and disabled state

Selection and visual slots

Independent controls

Props

​Actions and disabled state

​Selection and visual slots

​Independent controls

​Props

Actions and disabled state

Selection and visual slots

Independent controls

Props