Overview
Full-width button row for selectable sidebars, timelines, and master-detail lists.
Use ActionRow when each item in a list should behave like a full-width button with
selection state and optional leading, description, metadata, and trailing regions.
Use the default selectedState="pressed" for in-page selection, such as a session
list that swaps the detail panel without navigating. Use selectedState="current"
when the row represents the current step, edge, page, or location in a larger set;
set currentValue to the matching aria-current value.
ActionRow owns the interactive target. Do not put it on an interactive list-item
root or nest secondary buttons inside the row. If the full row navigates to a URL,
use NavigationItem instead. Use StackedListItem with href when only the title
should be a link and trailing controls remain separate. If the content is static,
use DataList and StackedListItem.
CSS Variables
Override these variables on the ActionRow root with a style attribute or a
stylesheet rule that targets your row class.
--cinder-action-row-body-gap--cinder-action-row-description-font-size--cinder-action-row-layout-column-gap--cinder-action-row-layout-row-gap--cinder-action-row-meta-font-size--cinder-action-row-padding-block--cinder-action-row-padding-inline--cinder-action-row-title-font-size--cinder-action-row-trailing-gap
When to use
- Selecting an item in-place from a vertical list, timeline, run list, or master-detail sidebar.
- A row must behave like a native button while presenting rich row metadata.
- Navigating to a URL — use stacked-list-item with href or navigation-item instead.
- Showing static record rows without button semantics — use stacked-list-item inside data-list.
Examples
Selectable action rows
Rows with button semantics for master-detail lists and timeline selections.
Dense timeline rows
Timeline rows can tune row padding, layout gap, and description/meta type through public CSS variables.
Timeline edge rows
Current-step rows use aria-current while preserving the same full-row button layout.
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
density | 'comfortable' | 'condensed' | 'comfortable' | Density token surfaced as data-cinder-density. | ||
selected | boolean | false | Whether the row is currently selected. | ||
selectedState | 'pressed' | 'current' | 'pressed' | Accessible state mapping for selected rows.
Use pressed for in-page selectable rows and current for navigation/current-item rows. | ||
currentValue | 'page''step''location''date''time''true' | 'true' | aria-current value used when selectedState="current" and selected is true. | ||
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. | ||
disabled | unknown | req | |||
leading | snippet | Leading visual such as an icon, avatar, marker, or status dot. | |||
title | snippet | req | Primary row label. Required so the row has visible text and an accessible name. | ||
description | snippet | Secondary description below the title. | |||
meta | snippet | Tertiary metadata such as timestamp, status text, or a compact badge. | |||
trailing | snippet | Trailing region such as a timestamp, count, badge, chevron, or shortcut hint. |