Component

Action List

A vertical list whose rows are each one action — open, select, go to. Every row is a native button, so it is reachable with Tab and activated with Enter or Space, unlike a clickable table row.

Basic

Rows with a title, a supporting line and a trailing column.

Opened: nothing yet

Compact density

Tighter rows for dense panels and sidebars.

Disabled rows

A disabled row stays visible but cannot be activated.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { ActionList, ActionListItem } from '@refraction-ui/react'

export function Reports({ reports, open }) {
  return (
    <ActionList aria-label="Reports">
      {reports.map((r) => (
        <ActionListItem
          key={r.id}
          title={r.name}
          description={r.summary}
          trailing={r.updated}
          onClick={() => open(r.id)}
        />
      ))}
    </ActionList>
  )
}

Props

Prop	Type	Default	Description
`ActionList`	`React.HTMLAttributes<HTMLUListElement>`	--	The list (<ul>). Give it an aria-label when the surrounding heading does not name it.
`title`	`React.ReactNode`	--	ActionListItem: primary line (required).
`description`	`React.ReactNode`	--	ActionListItem: optional supporting line.
`meta`	`React.ReactNode`	--	ActionListItem: optional tertiary line (owner, tags, ids).
`trailing`	`React.ReactNode`	--	ActionListItem: optional trailing column (dates, sizes, counts).
`density`	`'default' \| 'compact'`	`'default'`	ActionListItem: row padding.
`disabled`	`boolean`	`false`	ActionListItem: disables the row button.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	--	ActionListItem: all other button props go to the row button, which also receives the ref.