Status

The state of something at a glance: a server, a deployment, a user.

<twig:Tabler:Status variant="success" label="Online" />
<twig:Tabler:Status variant="secondary" label="Offline" />

<span class="status status-success">Online</span>
<span class="status status-secondary">Offline</span>

Variants

variant takes a theme color, or muted:

{% for variant in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'muted'] %}
    <twig:Tabler:Status variant="{{ variant }}" label="{{ variant|capitalize }}" />
{% endfor %}

<span class="status status-primary">Primary</span>
<span class="status status-secondary">Secondary</span>
<span class="status status-success">Success</span>
<span class="status status-danger">Danger</span>
<span class="status status-warning">Warning</span>
<span class="status status-info">Info</span>
<span class="status status-dark">Dark</span>
<span class="status status-light">Light</span>
<span class="status status-muted">Muted</span>

It also takes a palette color:

{% for color in ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan'] %}
    <twig:Tabler:Status variant="{{ color }}" label="{{ color|capitalize }}" />
{% endfor %}

<span class="status status-blue">Blue</span>
<span class="status status-azure">Azure</span>
<span class="status status-indigo">Indigo</span>
<span class="status status-purple">Purple</span>
<span class="status status-pink">Pink</span>
<span class="status status-red">Red</span>
<span class="status status-orange">Orange</span>
<span class="status status-yellow">Yellow</span>
<span class="status status-lime">Lime</span>
<span class="status status-green">Green</span>
<span class="status status-teal">Teal</span>
<span class="status status-cyan">Cyan</span>

Dot

dot adds a leading dot; animated makes it pulse, for something live or in progress:

<twig:Tabler:Status variant="success" dot="{{ true }}" label="Deployed" />
<twig:Tabler:Status variant="danger" dot="{{ true }}" animated="{{ true }}" label="Live" />

<span class="status status-success">
    <span class="status-dot"></span>
    Deployed
</span>
<span class="status status-danger">
    <span class="status-dot status-dot-animated"></span>
    Live
</span>

Lite

lite replaces the tinted background with a neutral border, and the text takes the body color: only the dot keeps the variant color (status-lite):

<twig:Tabler:Status variant="success" lite="{{ true }}" dot="{{ true }}" label="Paid" />
<twig:Tabler:Status variant="warning" lite="{{ true }}" dot="{{ true }}" label="Pending" />
<twig:Tabler:Status variant="danger" lite="{{ true }}" dot="{{ true }}" label="Overdue" />

<span class="status status-success status-lite">
    <span class="status-dot"></span>
    Paid
</span>
<span class="status status-warning status-lite">
    <span class="status-dot"></span>
    Pending
</span>
<span class="status status-danger status-lite">
    <span class="status-dot"></span>
    Overdue
</span>

Indicator

Status:Indicator is a larger, standalone marker (status-indicator), e.g. next to a service name on an uptime page. animated makes it pulse. Without an aria-label, it is hidden from assistive technology (aria-hidden="true"), so put the state in the text next to it. With an aria-label, it gets role="img":

<div class="d-flex align-items-center gap-2 mb-2">
    <twig:Tabler:Status:Indicator variant="green" animated="{{ true }}" />
    API: operational
</div>
<div class="d-flex align-items-center gap-2 mb-2">
    <twig:Tabler:Status:Indicator variant="orange" animated="{{ true }}" />
    Database: degraded performance
</div>
<div class="d-flex align-items-center gap-2">
    <twig:Tabler:Status:Indicator variant="red" aria-label="Outage" />
    Search
</div>

<div class="d-flex align-items-center gap-2 mb-2">
    <span class="status-indicator status-green status-indicator-animated" aria-hidden="true">
        <span class="status-indicator-circle"></span>
        <span class="status-indicator-circle"></span>
        <span class="status-indicator-circle"></span>
    </span>
    API: operational
</div>
<div class="d-flex align-items-center gap-2 mb-2">
    <span class="status-indicator status-orange status-indicator-animated" aria-hidden="true">
        <span class="status-indicator-circle"></span>
        <span class="status-indicator-circle"></span>
        <span class="status-indicator-circle"></span>
    </span>
    Database: degraded performance
</div>
<div class="d-flex align-items-center gap-2">
    <span class="status-indicator status-red" role="img" aria-label="Outage">
        <span class="status-indicator-circle"></span>
        <span class="status-indicator-circle"></span>
        <span class="status-indicator-circle"></span>
    </span>
    Search
</div>

Composed

Pass children for rich content, and add the dot with Status:Dot. Children replace the whole content, so the dot and label props are ignored:

<twig:Tabler:Status variant="warning">
    <twig:Tabler:Status:Dot animated="{{ true }}" />
    Deploying <strong>v2.4.0</strong>
</twig:Tabler:Status>

<span class="status status-warning">
    <span class="status-dot status-dot-animated"></span>
    Deploying
    <strong>v2.4.0</strong>
</span>

Blocks

To keep the dot and change only the text, override the label block:

<twig:Tabler:Status variant="info" dot="{{ true }}" label="Queued">
    <twig:block name="label">Queued, position <strong>3</strong></twig:block>
</twig:Tabler:Status>

<span class="status status-info">
    <span class="status-dot"></span>
    Queued, position
    <strong>3</strong>
</span>

See Composition for how blocks work.

Props

Prop	Type	Default	Description
`variant`	string	`'primary'`	`primary` `secondary` `success` `danger` `warning` `info` `dark` `light` `muted`, or a palette color: `blue` `azure` `indigo` `purple` `pink` `red` `orange` `yellow` `lime` `green` `teal` `cyan`
`dot`	bool	`false`	Leading dot, rendered with `Status:Dot`
`animated`	bool	`false`	Pulses the dot (needs `dot`)
`lite`	bool	`false`	Neutral border and text, only the dot keeps the color (`status-lite`)
`label`	string?	`null`	The status text

Other attributes go to the root <span class="status">.

Status:Indicator:

Prop	Type	Default	Description
`variant`	string?	`null`	Any `variant` of `Status` (`status-{variant}`)
`animated`	bool	`false`	Pulses the indicator (`status-indicator-animated`)

Other attributes go to the root <span class="status-indicator">.

Sub-components

Component	Renders
`Status:Dot`	`<span class="status-dot">`; its `animated` prop (default `false`) adds `status-dot-animated`
`Status:Indicator`	`<span class="status-indicator">` with three circles: a larger standalone marker

Blocks

Block	Default
`dot`	`Status:Dot`, animated when `animated`, when `dot` is set
`label`	The `label` prop, when set
`content`	`dot` and `label`: replace it to compose freely