Feedback

Message

Inline feedback on a page or in a form, plus the hint and the validation error under a field.

Features13

API

Theming

Severities

Eight severities. danger and warn are announced at once (role="alert"), the others politely.

Your changes are saved as a draft.

The domain is connected.

The certificate expires in 5 days.

The payment was declined.

Only owners can change this setting.

New: export reports to CSV.

Need a hand? Open the guide.

Maintenance tonight from 02:00.

14 lines

<div class="list">  <tx-message severity="info" icon="info-circle" text="Your changes are saved as a draft." />  <tx-message severity="success" icon="check-circle" text="The domain is connected." />  <tx-message    severity="warn"    icon="exclamation-triangle"    text="The certificate expires in 5 days."  />  <tx-message severity="danger" icon="times-circle" text="The payment was declined." />  <tx-message severity="secondary" icon="lock" text="Only owners can change this setting." />  <tx-message severity="primary" icon="star" text="New: export reports to CSV." />  <tx-message severity="help" icon="question-circle" text="Need a hand? Open the guide." />  <tx-message severity="contrast" icon="bell" text="Maintenance tonight from 02:00." /></div>

Variants

A tinted box by default; outlined drops the fill, text drops the box, simple also drops the padding — for a line under a field or inside a table.

Default — tinted box

Outlined

Text

Simple

6 lines

<div class="list">  <tx-message severity="warn" icon="exclamation-triangle" text="Default — tinted box" />  <tx-message severity="warn" icon="exclamation-triangle" variant="outlined" text="Outlined" />  <tx-message severity="warn" icon="exclamation-triangle" variant="text" text="Text" />  <tx-message severity="warn" icon="exclamation-triangle" variant="simple" text="Simple" /></div>

Sizes

small, medium (default) and large.

Small

Medium

Large

5 lines

<div class="list">  <tx-message size="small" icon="info-circle" text="Small" />  <tx-message icon="info-circle" text="Medium" />  <tx-message size="large" icon="info-circle" text="Large" /></div>

Icons

No icon unless you set one. A tectra icon name (also with the pi- prefix), an icon class, or your own markup in <ng-template txMessageIcon>.

No icon

Tectra icon name

A name with the pi- prefix works too

Own icon template — three files uploaded.

9 lines

<div class="list">  <tx-message text="No icon" />  <tx-message icon="shield" text="Tectra icon name" />  <tx-message icon="pi-cloud-upload" text="A name with the pi- prefix works too" />  <tx-message severity="success">    <ng-template txMessageIcon><span class="count">3</span></ng-template>    Own icon template — three files uploaded.  </tx-message></div>

Content

Without text the message shows its content — links, buttons, several lines.

Confirm your email. We sent a link to the address you signed up with.

11 lines

<tx-message severity="warn" icon="envelope">  <div class="body">    <span      ><strong>Confirm your email.</strong> We sent a link to the address you signed up      with.</span    >    <button txButton size="small" severity="warn" [outlined]="true" (click)="sent.set(true)">      {{ sent() ? 'Sent again' : 'Resend link' }}    </button>  </div></tx-message>

Closable

closable adds a close button; (closed) reports it. Your own icon goes into <ng-template txMessageCloseIcon>.

You can hide this tip.

14 lines

<div class="list">  @if (isShown()) {    <tx-message      icon="info-circle"      text="You can hide this tip."      [closable]="true"      (closed)="isShown.set(false)"    />  } @else {    <button txButton size="small" severity="secondary" (click)="isShown.set(true)">      Show again    </button>  }</div>

Life

life closes the message after that many milliseconds.

12 lines

<div class="list">  <button txButton size="small" icon="check" (click)="save()">Save</button>  @for (id of saved(); track id) {    <tx-message      severity="success"      icon="check-circle"      text="Saved — this note closes in 3 seconds."      [life]="3000"      (closed)="remove(id)"    />  }</div>

Field hint

<tx-field-hint for="id"> sits under a field and is added to its aria-describedby, so screen readers read it with the field. severity="success" and an icon for a positive note.

Username

Letters, numbers and dashes. You can change it later.

Domain

DNS records found

16 lines

<div class="form">  <div>    <tx-label for="hint-username">Username</tx-label>    <input txInput id="hint-username" [fluid]="true" />    <tx-field-hint for="hint-username"      >Letters, numbers and dashes. You can change it later.</tx-field-hint    >  </div>  <div>    <tx-label for="hint-domain">Domain</tx-label>    <input txInput id="hint-domain" value="docs.example.com" [fluid]="true" />    <tx-field-hint for="hint-domain" severity="success" icon="check-circle"      >DNS records found</tx-field-hint    >  </div></div>

Field error

<tx-field-error [control]> shows the first error of the control once it is touched or changed — submit marks every field touched. Texts come from the locale. The field turns red by itself.

22 lines

<form class="form" [formGroup]="form" (ngSubmit)="submit()">  <div>    <tx-label for="error-email" [required]="true">Email</tx-label>    <input txInput id="error-email" type="email" formControlName="email" [fluid]="true" />    <tx-field-error for="error-email" [control]="form.controls.email" />  </div>  <div>    <tx-label for="error-password" [required]="true">Password</tx-label>    <tx-password      inputId="error-password"      autocomplete="new-password"      formControlName="password"      [toggleMask]="true"      [fluid]="true"    />    <tx-field-error for="error-password" [control]="form.controls.password" />  </div>  <button txButton type="submit">Create account</button>  @if (isSent()) {    <tx-message severity="success" icon="check-circle" text="Account created." />  }</form>

Own texts per error key through messages — a string with {param} from the error object, or a function. A validator can also return { key: { message } }. App-wide texts go to provideTectra({ validationMessages }).

Team name

11 lines

<div class="field">  <tx-label for="custom-name">Team name</tx-label>  <input    txInput    id="custom-name"    [formControl]="name"    placeholder="Try “admin” or one letter"    [fluid]="true"  />  <tx-field-error for="custom-name" [control]="name" [messages]="messages" /></div>

Success

successText appears when the control holds a valid value and was touched or changed.

Promo code

15 lines

<div class="field">  <tx-label for="success-code">Promo code</tx-label>  <input    txInput    id="success-code"    [formControl]="code"    placeholder="6 letters or digits"    [fluid]="true"  />  <tx-field-error    for="success-code"    [control]="code"    [successText]="'Code applied — 10% off'"  /></div>

Design tokens

[dt] changes the message tokens of one message.

Rounder, with a wider accent and a stronger tint.

Pass through

[pt] adds classes and styles to the parts: root, icon, content, closeButton.

Last edited 5 minutes ago