Blocks

Action Tile

A full-width clickable tile with an icon, a title, a line of text and a chevron — for a choice that starts at once.

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

Features3

API

Theming

Basic

A stack of tiles for a choice that starts at once. Click one: it shows a spinner while loading, and the others are disabled until it is done.

12 lines

<div class="methods">  @for (method of methods; track method.id) {    <tx-action-tile      [icon]="method.icon"      [title]="method.title"      [text]="method.text"      [loading]="sending() === method.id"      [disabled]="!!sending()"      (tileClick)="choose(method)"    />  }</div>

States

The icon and the text are optional. disabled dims the tile; loading swaps the chevron for a spinner and sets aria-busy.

15 lines

<div class="tiles">  <tx-action-tile icon="upload" title="Import from a file" text="CSV or XLSX, up to 10 MB" />  <tx-action-tile    title="Start from scratch"    text="An empty project with the default settings"  />  <tx-action-tile icon="building" title="Copy a project" />  <tx-action-tile    icon="shield"    title="Single sign-on"    text="Available on the business plan"    disabled  />  <tx-action-tile icon="question-circle" title="Checking access" loading /></div>

Design tokens

dt changes the tokens of one tile: here more padding, a round icon and a larger title.

11 lines

<tx-action-tile  class="tile"  icon="file-import"  title="Import contacts"  text="From a CSV file or another account"  [dt]="{    root: { padding: '17.5px', borderRadius: '14px' },    icon: { size: '42px', borderRadius: '999px' },    title: { fontSize: '15px' },  }"/>