Clickable Row with Actions
ID: clickable_row_with_actions
Category: surface
Required slots: title, actions
Live example
Overview
Read more
Faux-nested interactive control pattern. A row or card whose entire surface acts as a primary link hit area using the CSS breakout technique, while secondary action buttons remain independently clickable. No interactive elements are nested inside other interactive elements.
When to use / When not to use
When to use
- You need an entire row or card to act like the primary navigation target with trailing controls.
- The row includes one dominant destination and one or more quick secondary actions.
When not to use
- Each action is equally important and users need to compare several adjacent controls.
- The row destination does not navigate and behaves like an in-place toggle.
Accessibility notes
- Keyboard keys: Tab, Enter.
- ARIA attributes: aria-label.
- Visible focus required: Yes.
Implementation
{{--
Pattern Demo: Clickable Row with Actions
Faux-nested interactive controls using the CSS breakout technique.
- Primary link uses ::before to expand its hit area over the entire row.
- Secondary buttons are elevated above the overlay via z-index.
- No interactive elements are nested inside other interactive elements.
--}}
<ul class="dig-clickable-list" role="list">
{{-- Row 1 --}}
<li class="dig-clickable-row">
<span class="dig-clickable-row__visual" aria-hidden="true">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill="var(--dig-white)"/>
<text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="var(--dig-electric)">馃崳</text>
</svg>
</span>
<span class="dig-clickable-row__body">
<a href="#sashimi-lunch" class="dig-clickable-row__link" aria-describedby="sashimi-meta">Sashimi Lunch</a>
<span class="dig-clickable-row__meta" id="sashimi-meta">12 pieces 路 Chef's selection 路 $24</span>
</span>
<span class="dig-clickable-row__actions">
<button type="button" class="dig-clickable-row__btn" aria-label="Favorite Sashimi Lunch">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 1.3l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.5l-4 2.2.8-4.5L1.5 6l4.5-.6L8 1.3z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
<span aria-hidden="true">Favorite</span>
</button>
<button type="button" class="dig-clickable-row__btn" aria-label="Add Sashimi Lunch">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span aria-hidden="true">Add</span>
</button>
</span>
</li>
{{-- Row 2 --}}
<li class="dig-clickable-row">
<span class="dig-clickable-row__visual" aria-hidden="true">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill="var(--dig-white)"/>
<text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="var(--dig-navy-700)">馃</text>
</svg>
</span>
<span class="dig-clickable-row__body">
<a href="#garden-salad" class="dig-clickable-row__link" aria-describedby="salad-meta">Garden Salad</a>
<span class="dig-clickable-row__meta" id="salad-meta">Mixed greens 路 Vinaigrette 路 $12</span>
</span>
<span class="dig-clickable-row__actions">
<button type="button" class="dig-clickable-row__btn" aria-label="Favorite Garden Salad">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 1.3l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.5l-4 2.2.8-4.5L1.5 6l4.5-.6L8 1.3z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
<span aria-hidden="true">Favorite</span>
</button>
<button type="button" class="dig-clickable-row__btn" aria-label="Add Garden Salad">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span aria-hidden="true">Add</span>
</button>
</span>
</li>
{{-- Row 3 --}}
<li class="dig-clickable-row">
<span class="dig-clickable-row__visual" aria-hidden="true">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill="var(--dig-white)"/>
<text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="var(--dig-navy-900)">馃嵃</text>
</svg>
</span>
<span class="dig-clickable-row__body">
<a href="#strawberry-cake" class="dig-clickable-row__link" aria-describedby="cake-meta">Strawberry Cake</a>
<span class="dig-clickable-row__meta" id="cake-meta">Two layers 路 Fresh berries 路 $18</span>
</span>
<span class="dig-clickable-row__actions">
<button type="button" class="dig-clickable-row__btn" aria-label="Favorite Strawberry Cake">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 1.3l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.5l-4 2.2.8-4.5L1.5 6l4.5-.6L8 1.3z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
<span aria-hidden="true">Favorite</span>
</button>
<button type="button" class="dig-clickable-row__btn" aria-label="Add Strawberry Cake">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span aria-hidden="true">Add</span>
</button>
</span>
</li>
</ul>
<div class="mt-4">
<p class="dig-meta"><strong>Forum categories use this pattern:</strong> full-row anchor, quiet counts metadata, and chevron affordance.</p>
<ul class="dig-clickable-list" role="list">
<x-patterns.clickable-row-actions
href="#forum-category-example"
title="Member Introductions"
description="Start here to introduce yourself to the Deaf in Government community."
meta="24 threads 路 137 posts"
/>
</ul>
</div>