Display

Status Icon

A small coloured icon for a yes / no or a severity state in tables and lists.

Features6

API

Theming

Basic

status shows a green check or a red cross, named "Yes" / "No" for screen readers.

Labels

label names the icon and shows as a tooltip on hover.

Severities

severity instead of status: success, info, warn, danger, secondary.

7 lines

<div class="row">  <tx-status-icon severity="success" label="Healthy" />  <tx-status-icon severity="info" label="Updating" />  <tx-status-icon severity="warn" label="Expires soon" />  <tx-status-icon severity="danger" label="Down" />  <tx-status-icon severity="secondary" label="Paused" /></div>

Sizes

small, medium and large; icon sets an own icon.

6 lines

<div class="row">  <tx-status-icon [status]="true" size="small" />  <tx-status-icon [status]="true" />  <tx-status-icon [status]="true" size="large" />  <tx-status-icon severity="info" icon="star-fill" label="Starred" size="large" /></div>

In a table

In a table the icon keeps its name for screen readers; the column header gives the context.

Domains
Domain	Active	SSL
docs.example.com
shop.example.com
old.example.com

26 lines

<table class="table">  <caption>    Domains  </caption>  <thead>    <tr>      <th scope="col">Domain</th>      <th scope="col">Active</th>      <th scope="col">SSL</th>    </tr>  </thead>  <tbody>    @for (domain of domains; track domain.name) {      <tr>        <td>{{ domain.name }}</td>        <td><tx-status-icon [status]="domain.active" /></td>        <td>          <tx-status-icon            [status]="domain.ssl"            [label]="domain.ssl ? 'Certificate valid' : 'No certificate'"          />        </td>      </tr>    }  </tbody></table>

Design tokens

dt changes the size and colours.