ListItemButton

Panoramica

Usa ListItemButton per le righe di azione e i pulsanti di selezione autonomi. Combina il layout di ListItem con un pulsante nativo, incluse l’attivazione con Invio e Spazio, la gestione dello stato attivo e del comportamento disabilitato. Il valore predefinito è type="button".

Utilizzo

import { ListItemButton } from 'twenty-ui/components/navigation';
import { IconCopy } from 'twenty-ui/icon';

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

Azioni e stato disabilitato

Passa direttamente onClick e disabled. I pulsanti disabilitati usano l’aspetto della riga corrispondente, impediscono l’attivazione e rimangono nell’ordine di tabulazione.

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

Imposta focusableWhenDisabled per mantenere attivabile lo stato attivo di un pulsante disabilitato. Usa aria-disabled e continua a bloccare l’attivazione. Gli attributi, gli eventi, gli stili, i nomi delle classi e un riferimento HTMLButtonElement del pulsante nativo raggiungono il pulsante. Gli eventi si propagano normalmente; i chiamanti forniscono qualsiasi criterio per stopPropagation() o preventDefault().

Selezione e slot visivi

L’applicazione gestisce gli stati indipendenti active, selected e focused. Usa active per la riga aperta o corrente. Abbina selected allo stato accessibile appropriato, ad esempio aria-pressed per un pulsante di attivazione/disattivazione. focused evidenzia la riga senza spostare lo stato attivo del DOM. Gli indicatori e i suggerimenti per le scorciatoie sono decorativi; la tua applicazione registra le scorciatoie e gestisce la navigazione.

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

Usa startIcon, endIcon, description e descriptionPlacement per i contenuti di supporto. color="danger" contrassegna un’azione distruttiva. shortcutJoinLabel controlla il testo tra scorciatoie sequenziali e hasSubmenu visualizza un indicatore di sottomenu.

Contenuto di supporto su più righe

Imposta descriptionPlacement="below" per disporre il testo di supporto sotto l’etichetta. L’etichetta mantiene il proprio comportamento di troncamento. Passa Text con truncate o lineClamp come description quando hai bisogno di un’anteprima più breve. I posizionamenti inline e end mantengono il loro aspetto esistente.

import { ListItemButton } from 'twenty-ui/components/navigation';
import { Avatar } from 'twenty-ui/primitives/data-display';

type PlanningActionProps = {
  active?: boolean;
  disabled?: boolean;
  onOpen: () => void;
};

export const PlanningAction = ({
  active = false,
  disabled = false,
  onOpen,
}: PlanningActionProps) => (
  <ListItemButton
    active={active}
    disabled={disabled}
    descriptionPlacement="below"
    description="Review the proposed timeline and confirm the next steps with the team."
    startIcon={<Avatar name="Alex Morgan" size="md" imageProps={{ alt: '' }} />}
    onClick={onOpen}
  >
    Quarterly planning
  </ListItemButton>
);

active applica lo sfondo della riga corrente. Imposta selectionAppearance="accent" per un riempimento accentato sulle righe selezionate con qualsiasi posizionamento della descrizione; il valore predefinito mantiene lo stile di selezione esistente basato sull’indicatore. focused applica lo sfondo evidenziato condiviso; il contorno focus-visible segue lo stato attivo effettivo della tastiera. Queste prop non aggiungono uno stato accessibile né spostano lo stato attivo. L’attivazione nativa dei pulsanti e il comportamento disabilitato rimangono invariati.

Controlli indipendenti

Mantieni pulsanti e caselle di controllo indipendenti accanto a ListItemButton, affinché ciascuno mantenga il proprio stato attivo e la propria attivazione. Non annidarli nei relativi slot di contenuto o icona. Il componente non dispone di uno slot actions. Usa un ListItem con la relativa radice div predefinita per una riga con controlli indipendenti e fornisci il comportamento disabilitato e la propagazione degli eventi per ciascun controllo.

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

Usa ListItem per contenuti passivi, link o proprietari semantici personalizzati. Usa le parti degli elementi Dropdown e Select esistenti all’interno dei rispettivi proprietari popup, che forniscono ruoli e navigazione tramite tastiera.

Props

boolean

Marks the open or current item independently of selection and focus. The caller supplies accessible state.

"danger" | "neutral"

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

ReactNode

Supporting text, placed according to descriptionPlacement.

"below" | "end" | "inline"

Places supporting content inline after the label, at the end, or below it with wrapping. Inline is the default.

boolean

predefinito:"false"

Disables activation and applies the matching row appearance.

ReactNode

Icon rendered after the content.

boolean

predefinito:"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.

"accent" | "default"

Selection styling independent of description placement. default preserves indicator-based styling; accent fills selected rows with the accent background.

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.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Azioni e stato disabilitato

Selezione e slot visivi

Contenuto di supporto su più righe

Controlli indipendenti

Props

​Panoramica

​Utilizzo

​Azioni e stato disabilitato

​Selezione e slot visivi

​Contenuto di supporto su più righe

​Controlli indipendenti

​Props

Panoramica

Utilizzo

Azioni e stato disabilitato

Selezione e slot visivi

Contenuto di supporto su più righe

Controlli indipendenti

Props