Row action — Malkai design system

Overview

A row action is a complete row that acts: the builder's service cells wear it to open their editor. The target is the row — the agent presses the thing she is reading, not a small face beside it — and the trailing chevron says the press leads somewhere before it happens.

Usage

Open the detail or editor for one rowUse a row action when the row's complete content identifies the destination and a separate small control would duplicate that target.
Make the full row the targetOne transparent action spans the row while its composed text, metadata, and optional leading media preserve their own reading order.
Show that the row leads somewhereA trailing chevron distinguishes an actionable row from a view-only row. Keep unrelated controls outside the stretched target.

Anatomy

1

2 3

1The row. One transparent full-width button, 44px minimum. The page composes what sits inside — a thumbnail, facts, marks — but the interactive face and the focus contract are the component's.
2Content. The item's own lines, in the page's composition. A screen reader gets the accessible name instead, which states the object and the act.
3Trailing chevron. The registry's right-facing go icon at 18px in the row's full ink. It marks that the whole row opens another view or layer and takes the accent on hover.

Variants and states

The stretched action

When a composed row holds facts and controls that cannot live inside one button, the named button stays its visible self and its hit area grows to the positioned row. The visible label keeps its native size; sibling controls must sit outside the stretched target.

Supporting detail

States

Every state below is the real component wearing that state, not a picture of it.

State	Specimen	What changes
Rest		Transparent — the row's content is the face, and the trailing chevron is the promise of the press.
Hover		A translucent ink wash announces the target's full extent on any ground, and the trailing chevron answers in the accent.
Keyboard focus		The 2px camel outline drawn inward, so a list of rows clips nothing.
Blocked		Quiet grey ink, a dead hover, no trailing chevron — the row says why in its own facts and never disappears from the list, but nothing about it invites a press.

Do and don't

Do

The whole service cell is one press into its editor, exactly as the builder wears it — and the trailing chevron says so before the press.

Mountain terrace dinner

Don't

A read-only row with a small "Open" beside it shrinks the target to a sliver and makes the row itself a dead zone the finger keeps hitting.

Copy

The name states object and actThe accessible name reads like the builder's own: Mountain terrace dinner — open its editor.
No duplicate verb on screenThe row does not carry "Open" or "Edit" as a visible word; the trailing chevron and the press are the verb.

Accessibility

One control, one stopThe row is a single button — not a div with a click handler — so it is one tab stop with one name.
The target holds through wrappingInner facts may wrap to two lines; the 44px floor and the single press survive.
The dialog is announcedA row that opens an editor carries aria-haspopup="dialog", the builder's own contract.
The chevron is decorationThe trailing chevron carries aria-hidden="true"; the accessible name is the announcement.
Stretched siblings stay reachableControls outside a stretched action keep their own z-order and their own tab stops — the stretch never swallows them.

When to reach for something else

The row navigates by its nameUse an object link, stretched over the row — a record's door is its name, not an anonymous press.
The row has sibling controlsUse the stretched action: the named button's target grows to the row while the siblings stay their own targets.
The row expands in placeUse the table's expanding row — that pattern owns the caret contract.

Markup

<!-- the whole row acts; the builder's service-cell grammar -->
<button class="mk-row-action" type="button" aria-haspopup="dialog"
        aria-label="Item name — open its editor">
  <span class="row-main">
    <span class="row-name">Item name</span>
    <span class="mk-subline">Supporting detail</span>
  </span>
  <svg class="go" data-mk-icon="go" aria-hidden="true"></svg>
</button>

<!-- a named button stretched over a composed row -->
<div class="service-row" style="position:relative">
  <button class="mk-stretched-action" type="button">Item name</button>
  <div class="mk-subline">Supporting detail</div>
  <!-- sibling controls sit OUTSIDE the stretched target;
       delete wears the destructive face -->
  <button class="mk-icon-btn mk-icon-btn-destructive" type="button"
          aria-label="Remove the item">
    <svg data-mk-icon="trash" aria-hidden="true"></svg>
  </button>
</div>