Blocks

Empty State

The "nothing here yet" block: an icon in a tinted circle, a title, a muted line of text and the actions that get the user going.

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

Features6

API

Theming

Basic

An icon, a title, a line of text and the action that fills the list. Put it into the txTableEmpty template of a table: it shows while the table has no rows.

No workers yetCreate the first worker to start.

21 lines

<div class="column">  <tx-table ariaLabel="Workers" dataKey="id" [value]="workers()" [columns]="columns">    <ng-template txTableEmpty>      <tx-empty-state        icon="bolt"        title="No workers yet"        text="Create the first worker to start."      >        <button txButton icon="plus" (click)="add()">Create worker</button>      </tx-empty-state>    </ng-template>  </tx-table>  @if (workers().length) {    <div class="row">      <button txButton icon="plus" size="small" (click)="add()">Add worker</button>      <button txButton severity="secondary" outlined size="small" (click)="workers.set([])">        Remove all      </button>    </div>  }</div>

Variants

framed draws its own card for an empty page, inset is a ground-coloured block inside a card, plain (default) has no frame.

No projectsProjects group your domains, reports and people.

Recent activity

Activity of the last 30 days shows here.

No notifications

19 lines

<div class="column">  <tx-empty-state    variant="framed"    icon="folder"    title="No projects"    text="Projects group your domains, reports and people."  >    <button txButton icon="plus">New project</button>  </tx-empty-state>  <tx-card title="Recent activity">    <tx-empty-state      variant="inset"      icon="history"      tone="neutral"      text="Activity of the last 30 days shows here."    />  </tx-card>  <tx-empty-state icon="bell" tone="neutral" title="No notifications" /></div>

Sizes

compact puts the icon next to the text in one row for small widgets, large is the onboarding size.

No data yetThe widget fills after the first visit.

No membersInvite people to work together.

Welcome aboardConnect your first source and the dashboard builds itself.

24 lines

<div class="column">  <tx-empty-state    size="compact"    variant="inset"    icon="chart-bar"    title="No data yet"    text="The widget fills after the first visit."  />  <tx-empty-state    variant="inset"    icon="users"    title="No members"    text="Invite people to work together."  />  <tx-empty-state    size="large"    variant="inset"    icon="sparkles"    title="Welcome aboard"    text="Connect your first source and the dashboard builds itself."  >    <button txButton icon="link">Connect a source</button>  </tx-empty-state></div>

Tones

tone colours the icon and its circle: a calm neutral for an empty list, success for "all done", danger for something that failed.

Inbox is emptyNew requests land here.

No documentsUpload a file to share it.

All doneEvery task is closed.

Nothing to reviewReviews show up here.

No schedulePick the hours to run.

Sync failedTry again in a minute.

12 lines

<div class="grid">  @for (item of tones; track item.tone) {    <tx-empty-state      size="compact"      variant="inset"      [tone]="item.tone"      [icon]="item.icon"      [title]="item.title"      [text]="item.text"    />  }</div>

No results

For a search without results tell the user what was searched and give a way back. Here the table searches with [(globalFilter)] and shows the empty state from its txTableEmpty template.

No cities foundNothing matches “Paris”. Check the spelling or clear the search.

33 lines

<div class="column">  <tx-icon-field class="search">    <tx-input-icon icon="search" />    <input      txInput      type="search"      aria-label="Search cities"      placeholder="Search cities"      [(ngModel)]="query"    />    <tx-input-clear />  </tx-icon-field>  <tx-table    ariaLabel="Cities"    dataKey="id"    [value]="cities"    [columns]="columns"    [(globalFilter)]="query"  >    <ng-template txTableEmpty>      <tx-empty-state        icon="search"        tone="neutral"        title="No cities found"        [text]="'Nothing matches “' + query() + '”. Check the spelling or clear the search.'"      >        <button txButton severity="secondary" outlined icon="times" (click)="query.set('')">          Clear search        </button>      </tx-empty-state>    </ng-template>  </tx-table></div>

Design tokens

dt changes the tokens of one empty state: here a square icon and a tighter layout.

No meetings todayEnjoy the quiet.

11 lines

<tx-empty-state  variant="framed"  icon="calendar"  title="No meetings today"  text="Enjoy the quiet."  [dt]="{    framed: { minHeight: '0', padding: '28px' },    icon: { borderRadius: '12px', tint: '18%' },    title: { fontSize: '16px' },  }"/>