Chip

<div class="row">  <tx-chip label="Design" />  <tx-chip label="Product" />  <tx-chip label="Engineering" /></div>

<div class="row">  <tx-chip icon="map-marker" label="Kyiv" />  <tx-chip icon="calendar" label="This week" />  <tx-chip icon="filter" label="Paid only" /></div>

<div class="row">  @for (person of people; track person.name) {    <tx-chip [label]="person.name" [image]="person.image" alt="" />  }</div>

<div class="field">  <span class="to">To:</span>  @for (email of recipients(); track email) {    <tx-chip      [label]="email"      icon="envelope"      [removable]="true"      [removeLabel]="'Remove ' + email"      (removed)="remove(email)"    />  } @empty {    <span class="hint">No recipients</span>  }</div>

<tx-chip    label="Compact, square"    icon="tag"    [removable]="true"    [dt]="{ root: { height: '24px', borderRadius: '6px', fontSize: '13px', paddingX: '8px' } }"  />