Overlay

Toast

Short messages about what just happened — saved, failed, exported. Put one <tx-toast /> in the app shell and send toasts from anywhere with TxToastService. This site has one at the bottom.

Features9

API

Theming

Basic

success, info, warn and error show a toast with the matching icon and colour. It closes after 3 seconds; several toasts form a stack that spreads out under the pointer and keeps them open. Screen readers hear every toast without losing focus.

34 lines

<div class="row">  <button    txButton    severity="success"    [outlined]="true"    (click)="toast.success('Changes saved')"  >    Success  </button>  <button    txButton    severity="info"    [outlined]="true"    (click)="toast.info('A new version is available')"  >    Info  </button>  <button    txButton    severity="warn"    [outlined]="true"    (click)="toast.warn('Your trial ends in 3 days')"  >    Warn  </button>  <button    txButton    severity="danger"    [outlined]="true"    (click)="toast.error('The file is too large')"  >    Error  </button></div>

Title

title names the message for screen readers; with a text it stays hidden, alone it is the visible line.

Actions

actions adds buttons to the toast — Undo, Retry, Open. An action closes the toast after it runs unless it sets keepOpen.

Weekly sync notes
Budget draft
Onboarding checklist

16 lines

<ul class="list">  @for (item of items(); track item) {    <li>      {{ item }}      <button        txButton        icon="inbox"        size="small"        severity="secondary"        [text]="true"        [attr.aria-label]="'Archive ' + item"        (click)="archive(item)"      ></button>    </li>  }</ul>

Loading

loading() shows a spinner and stays until you update() it with a result. The update restarts its life and is announced again.

6 lines

<div class="row">  <button txButton icon="file-export" (click)="exportRows(true)">Export rows</button>  <button txButton severity="secondary" [outlined]="true" (click)="exportRows(false)">    Export that fails  </button></div>

Sticky

sticky keeps the toast until it is closed; closable: false removes the close button. clear() closes every toast, clear(key) those of one outlet.

7 lines

<div class="row">  <button txButton severity="secondary" [outlined]="true" (click)="sticky()">Sticky</button>  <button txButton severity="secondary" [outlined]="true" (click)="notClosable()">    Without a close button  </button>  <button txButton severity="secondary" [text]="true" (click)="toast.clear()">Clear all</button></div>

Progress

showProgress draws the time that is left along the bottom edge; it stops while the stack is hovered.

Positions

position puts the outlet in one of six places (bottom-center by default). Several outlets can live side by side: give each a key and send toasts with the same key. Each stack grows away from its edge.

14 lines

<div class="grid">  @for (position of positions; track position) {    <button      txButton      size="small"      severity="secondary"      [outlined]="true"      (click)="show(position)"    >      {{ position }}    </button>    <tx-toast [position]="position" [key]="position" />  }</div>

Template

template replaces the content of one toast; let-toast gives the toast with its data, let-close closes it. For every toast of an outlet use <ng-template txToastTemplate> inside <tx-toast>.

16 lines

<button txButton severity="secondary" [outlined]="true" (click)="mention()">  Simulate a mention</button><ng-template #mentionToast let-toast let-close="close">  <tx-avatar size="small" [name]="toast.data.author" />  <div class="body">    <strong>{{ toast.data.author }}</strong> mentioned you in    <span class="task">{{ toast.data.task }}</span>    <div class="actions">      <button txButton size="small" (click)="close()">Reply</button>      <button txButton size="small" severity="secondary" [text]="true" (click)="close()">        Later      </button>    </div>  </div></ng-template>

Design tokens

dt on an outlet changes the tokens of its toasts — here a smaller pill for quick confirmations.

13 lines

<button txButton severity="secondary" [outlined]="true" (click)="show()">  Show a compact toast</button><tx-toast  key="compact"  position="top-center"  [dt]="{    root: { width: '320px' },    item: { paddingY: '4px', paddingEnd: '12px', fontSize: '12.25px' },    icon: { size: '24px', fontSize: '11px' },    text: { paddingY: '2px', lineHeight: '18px' },  }"/>