Display

Pill

A small rounded label for a status, a category or a count.

Features9

API

Theming

Tones

Eight tones on a soft tint — the text keeps AA contrast in both themes.

neutral

primary

success

info

warn

danger

help

contrast

Variants

soft (default), solid for strong statuses, outline for quiet ones — the icon keeps the tone.

soft

solid

outline

9 lines

<div class="grid">  @for (variant of variants; track variant) {    <div class="row">      @for (tone of tones; track tone) {        <tx-pill [tone]="tone" [variant]="variant" icon="circle-fill">{{ variant }}</tx-pill>      }    </div>  }</div>

Sizes

small for dense tables, medium (default, also normal), large.

Small

Medium

Large

5 lines

<div class="row">  <tx-pill size="small" tone="primary" icon="tag">Small</tx-pill>  <tx-pill tone="primary" icon="tag">Medium</tx-pill>  <tx-pill size="large" tone="primary" icon="tag">Large</tx-pill></div>

Icons

icon takes a tectra name, a pi- name or an icon class.

Paid

Overdue in 3 days

Failed

Public

6 lines

<div class="row">  <tx-pill tone="success" icon="check-circle">Paid</tx-pill>  <tx-pill tone="warn" icon="pi-clock">Overdue in 3 days</tx-pill>  <tx-pill tone="danger" icon="exclamation-triangle">Failed</tx-pill>  <tx-pill tone="info" icon="globe">Public</tx-pill></div>

Dot

dot puts a status dot in front — a calm way to show state in lists.

Online

Away

Offline

Down

6 lines

<div class="row">  <tx-pill tone="success" [dot]="true">Online</tx-pill>  <tx-pill tone="warn" [dot]="true">Away</tx-pill>  <tx-pill [dot]="true">Offline</tx-pill>  <tx-pill tone="danger" variant="outline" [dot]="true">Down</tx-pill></div>

Removable

removable adds a remove button with a translated label; (removed) fires on click, Enter, Space, Delete or Backspace.

design

frontend

accessibility

research

13 lines

<div class="row">  @for (tag of tags(); track tag) {    <tx-pill      tone="primary"      [removable]="true"      [removeLabel]="'Remove ' + tag"      (removed)="remove(tag)"      >{{ tag }}</tx-pill    >  } @empty {    <button txButton size="small" [text]="true" (click)="reset()">Bring the tags back</button>  }</div>

Leading

txPillLeading puts your own element before the text — a flag, a logo or a tiny avatar.

🇺🇦Ukraine

OKOlena K.

TSTaras S.

5 lines

<div class="row">  <tx-pill><span txPillLeading class="flag">🇺🇦</span>Ukraine</tx-pill>  <tx-pill><span txPillLeading class="avatar">OK</span>Olena K.</tx-pill>  <tx-pill tone="info"><span txPillLeading class="avatar teal">TS</span>Taras S.</tx-pill></div>

Table

small pills in a dense list — the usual place for them.

Domain	Status	Plan
shop.example.com	Live	Team
docs.example.com	Pending DNS	Free
old.example.com	Expired	Team

22 lines

<table class="table">  <thead>    <tr>      <th>Domain</th>      <th>Status</th>      <th>Plan</th>    </tr>  </thead>  <tbody>    @for (row of rows; track row.domain) {      <tr>        <td>{{ row.domain }}</td>        <td>          <tx-pill size="small" [tone]="row.tone" [dot]="true">{{ row.status }}</tx-pill>        </td>        <td>          <tx-pill size="small" variant="outline">{{ row.plan }}</tx-pill>        </td>      </tr>    }  </tbody></table>

Design tokens

[dt] changes the pill tokens — here square corners and a stronger tint.

Beta