Action Row

One tappable list row with a leading icon, a title, an optional second line and a trailing value or caret. Built with CSS Modules — copy it into your project and own it completely.

Default

A single button. The whole row is the target, at least 44px tall.

List

ActionRowList renders a ul, wraps each row in an li and draws a hairline between rows. The hairline reads --hairline-width, so a theme with hairlines: off removes it with no layout shift.

Rest, hover, focus-visible, selected, open and disabled. Selected is a lifted fill with a light inset edge, never white; the edge is a state edge at --control-state-edge-width, so edges: off removes resting edges and keeps it. No state is carried by colour alone: aria-current, aria-expanded and disabled expose each one to assistive tech.

As a link

asChild renders the row as the one child element. Put the title inside it; the slots are placed around that text.

Billing details

Installation

npx visor add action-row

This copies two files into your project:

components/ui/action-row/action-row.tsx — the component
components/ui/action-row/action-row.module.css — the styles

Usage

import { ActionRow, ActionRowList } from '@/components/ui/action-row/action-row';
import { CaretRight, MapPin } from '@phosphor-icons/react';

export default function PassDetails() {
  return (
    <ActionRowList aria-label="Pass details">
      <ActionRow leading={<MapPin />} line="Open in Maps" trailing={<CaretRight />} onClick={openMaps}>
        Address
      </ActionRow>
    </ActionRowList>
  );
}

When to Use

A list where each row opens a picker, a screen, a map or a billing page
A row that reads a value or a verb on the right ("3 suggested · Review")
Person and invitation rows whose whole surface is the target

When Not to Use

A row that needs a Switch or a second button: the row is already one button or link, so its trailing slot is non-interactive (nesting interactive content breaks WCAG 4.1.2, and a focusable element in the slot fires a development warning). Build a label row with the Switch as its own control.
A row that expands in place: use Accordion or Collapsible. ActionRow is the closed row; open only styles a row that has opened a picker or popover.
A read-only label and value: use Key-Value List.

Theming

Each state has a token under components.action-row (see Component Tokens): hover-bg, open-bg, selected-bg, selected-edge-color, disabled-opacity, plus geometry (min-height, padding, gap, radius) and colour (line-color, leading-color, trailing-color).

API Reference

No props data available for “action-row”.

The component also accepts all standard HTML <button> attributes (onClick, aria-label, type).