Badge#

A small labelled tag — a status pill or count. Three styles via variant.

Import#

TSX 
import { Badge } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, Badge } from '@sigx/terminal';

const App = component(() => {
    return () => (
        <box>
            <Badge label="NEW" variant="solid" color="accent" />
            <text> </text>
            <Badge label="beta" variant="accent" color="info" />
            <text> </text>
            <Badge label="3" variant="bracket" color="warn" />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeNotes
labelstringrequired — the badge text
variant'solid' | 'accent' | 'bracket'visual style
colortoken | #hexbadge color

See also#