Status

A small status dot, optionally pinging.

Colors

primarysecondaryaccentneutralinfosuccesswarningerrorbrandsilicabrand-duck

Sizes

xssmmdlgxl

Real use · team presence

Ada Lovelace — active nowGrace Hopper — awayAlan Turing — offline

Using Status

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Status — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class status, with 14 modifiers:

.status
.status-accent
.status-error
.status-info
.status-lg
.status-md
.status-neutral
.status-ping
.status-primary
.status-secondary
.status-sm
.status-success
.status-warning
.status-xl
.status-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Status } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
color	StatusColor	no	Dot color.
size	StatusSize	no	Dot size.
ping	boolean	no	Add an expanding "ping" ring.
label	string	no	Accessible label (e.g. "Online").

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { Status } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";
import { COLORS, SIZES } from "../lib/data";

export function StatusDemo() {
    return (
        <>
            <Section title="Colors">
                <Row>
                    {COLORS.map((color) => (
                        <span key={color} className="flex items-center gap-1.5 text-sm">
                            <Status color={color} label={color} />
                            {color}
                        </span>
                    ))}
                </Row>
            </Section>

            <Section title="Sizes">
                <Row>
                    {SIZES.map((size) => (
                        <span key={size} className="flex items-center gap-1.5 text-sm">
                            <Status color="primary" size={size} />
                            {size}
                        </span>
                    ))}
                </Row>
            </Section>

            <Section title="Real use · team presence">
                <div className="flex flex-col gap-2 text-sm">
                    <span className="flex items-center gap-1.5">
                        <Status color="success" ping label="Online" />
                        Ada Lovelace — active now
                    </span>
                    <span className="flex items-center gap-1.5">
                        <Status color="warning" label="Away" />
                        Grace Hopper — away
                    </span>
                    <span className="flex items-center gap-1.5">
                        <Status color="neutral" label="Offline" />
                        Alan Turing — offline
                    </span>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Status — lowers to <span>, carrying props.text as its content. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Status", "status", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "status status-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Status, on every path, is available through the Silica MCP server.