Indicator

Pins an overlay to a corner of its content.

Placements

3333

Real use · notification badge + presence dot

Using Indicator

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 Indicator — it needs no JavaScript, so the classes below are the whole story.

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

Root class indicator, with 3 modifiers:

.indicator
.indicator-bottom
.indicator-item
.indicator-start

React

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

npm i @wizeworks/silicaui-react

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

Props

Prop	Type	Required	Description
placement	IndicatorPlacement	no	Which corner. Default top-end.

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 { Indicator, IndicatorItem, Badge, Button, Status } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function IndicatorDemo() {
    return (
        <>
            <Section title="Placements">
                <Row>
                    {(["top-end", "top-start", "bottom-end", "bottom-start"] as const).map(
                        (placement) => (
                            <Indicator key={placement}>
                                <IndicatorItem placement={placement}>
                                    <Badge color="error" size="xs">
                                        3
                                    </Badge>
                                </IndicatorItem>
                                <Button variant="outline" color="neutral">
                                    {placement}
                                </Button>
                            </Indicator>
                        ),
                    )}
                </Row>
            </Section>

            <Section title="Real use · notification badge + presence dot">
                <Row>
                    <Indicator>
                        <IndicatorItem>
                            <Badge color="error" size="xs">
                                5
                            </Badge>
                        </IndicatorItem>
                        <Button variant="outline" color="neutral">
                            Inbox
                        </Button>
                    </Indicator>
                    <Indicator>
                        <IndicatorItem>
                            <Status color="success" ping />
                        </IndicatorItem>
                        <Button variant="outline" color="neutral">
                            Ada Lovelace
                        </Button>
                    </Indicator>
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Indicator — lowers to <span>, holding its children. 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("Indicator", "indicator", { /* props */ }, [/* children */]);
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 "indicator indicator-primary" rather than passing a colour as a prop.

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

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