Blocks

Pinned Tabs

Quick-switch tabs for a filter with many values: the user pins the values they use often, and they appear as tabs next to "All". The choice is saved in the browser.

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

Features2

API

Theming

Basic

Press "Customize", pin a few teams and save: they appear as tabs next to "All teams". The tabs and the full select share one value, so picking in either updates both; several values in the select leave no tab active. Reload the page — the pinned teams stay.


Refresh the pricing page	Design
Call back three leads	Sales
Answer the weekend tickets	Support
Upgrade the database	Platform
Launch the spring campaign	Growth
Close the quarter	Finance
New onboarding screens	Design

21 lines

<div class="column">  <div class="bar">    <tx-pinned-tabs      class="tabs"      stateKey="docs-pinned-tabs-teams"      allLabel="All teams"      ariaLabel="Teams"      [options]="teams"      [(selected)]="selected"    />    <tx-multiselect      class="select"      ariaLabel="Teams"      placeholder="All teams"      [options]="teams"      [ngModel]="selected()"      (ngModelChange)="selected.set($event ?? [])"    />  </div>  <tx-table ariaLabel="Tasks" dataKey="id" [value]="tasks()" [columns]="columns" /></div>

Design tokens

dt changes the tokens of one block: here more space between the tabs and the button. The tokens of the settings dialog (dialog, option, check) change in the preset.