Blocks

Actions Menu

The "more" button of a header, a panel or a card: an outlined ⋯ button with a short list of actions in a popover; destructive actions are red.

A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.

Features4

API

Theming

Basic

Give the actions as { id, label, icon?, danger? }; itemSelect returns the id once the menu has closed. tooltip names the button.

Last action: none

11 lines

<div class="header">  <div class="title">    <h3>Platform team</h3>    <tx-pill size="small" value="8 members" />  </div>  <div class="actions">    <button txButton icon="user-plus">Add member</button>    <tx-actions-menu tooltip="Team actions" [items]="actions" (itemSelect)="last.set($event)" />  </div></div><p class="result">Last action: {{ label(last()) }}</p>

Sizes

medium for page and panel headers; small — a 30px button — for cards and column headers.

Because itemSelect comes after the menu has closed, a destructive action can open a confirm straight away; the focus goes back to the button when the confirm closes. Each row builds its own list — "Pause" or "Resume".


Nightly backup	Every day at 02:00
Usage report	Mondays at 09:00
Cache warm-up	Paused

13 lines

<tx-table ariaLabel="Scheduled jobs" dataKey="id" [value]="jobs()" [columns]="columns">  <ng-template txTableCell="schedule" let-job>    {{ job.paused ? 'Paused' : job.schedule }}  </ng-template>  <ng-template txTableCell="menu" let-job>    <tx-actions-menu      size="small"      [tooltip]="job.name + ' actions'"      [items]="actionsFor(job)"      (itemSelect)="run(job, $event)"    />  </ng-template></tx-table>

Design tokens

dt changes the tokens of one menu: here a wider list with larger, pill-shaped actions.

8 lines

<tx-actions-menu  tooltip="File actions"  [items]="actions"  [dt]="{    list: { minWidth: '220px', gap: '3.5px' },    item: { fontSize: '14px', paddingY: '9px', borderRadius: '999px' },  }"/>