Buttons — Inline actions below item rows

Two divided item summaries each carry a row of text actions below the title and update date. Use when item commands should remain visible without a menu.

ReactHTML

1440 × 480

Open in new tab

Component.tsx14 lines

export default function ButtonsItemRowActions() {
  return (
    <ul className="w-72 divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-[26rem]" role="list"><li className="py-3 first:pt-0 last:pb-0"><div className="flex items-center justify-between gap-3"><span className="text-sm font-semibold">Item title</span>
    <span className="text-xs text-neutral-500">Updated Mar 14</span></div>
    <div className="mt-2 flex flex-wrap gap-4"><button className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Edit item title">Edit</button>
    <button className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Duplicate item title">Duplicate</button>
    <button className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Remove item title">Remove</button></div></li>
    <li className="py-3 first:pt-0 last:pb-0"><div className="flex items-center justify-between gap-3"><span className="text-sm font-semibold">Another item title</span>
    <span className="text-xs text-neutral-500">Updated Mar 14</span></div>
    <div className="mt-2 flex flex-wrap gap-4"><button className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Edit another item title">Edit</button>
    <button className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Duplicate another item title">Duplicate</button>
    <button className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Remove another item title">Remove</button></div></li></ul>
  )
}

Pattern notes

When to use: Use for a short collection with a few frequently used item commands. Choose an overflow disclosure for many secondary actions. Variations: replace Duplicate with Share, omit the date, or display a single item row.
Hierarchy: Read each item title, update date and its three actions before moving to the next row. Titles use at most 4 words, metadata 3 words and action labels one word. Repeated button labels name their item through aria-label.
Responsive: The root is 288px below 640px and 416px from 640px. Action rows wrap as needed while title and date retain their aligned reading order. Keep item titles short enough to fit the mobile summary.
Layout: A 288px list grows to 416px at sm with 16px padding, 1px row dividers and 12px vertical row padding. Each title/date summary uses a justified flex row; three underlined actions follow by 8px with 16px gaps.
States: All text buttons hover neutral-600 and show a 2px focus outline offset 2px. No selected or disabled items are shown. Edit, Duplicate and Remove are commands for the host to implement.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Item title                         Updated Mar 14    │
│ [Edit]       [Duplicate]       [Remove]              │
├──────────────────────────────────────────────────────┤
│ Another item title                 Updated Mar 14    │
│ [Edit]       [Duplicate]       [Remove]              │
└──────────────────────────────────────────────────────┘

View all

Buttons — Bulk selection bar
Layout tags: row,split,numbers,compact
Buttons — Command tiles with descriptions
Layout tags: grid,icons,compact
Buttons — Confirmation footer
Layout tags: stacked,split,compact

Buttons — Inline actions below item rows

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Confirmation footer