Button

An accessible, fully-tokened button with color, variant (solid/soft/outline/ghost/link), size, and shape props — the same class vocabulary in React and static HTML.

Colors (solid)

Variant · outline

Variant · soft

Variant · ghost

Variant · link

Variant · dash

Sizes

Icon buttons (square / circle)

States

Polymorphism · render → a real <a href>

Anchor · link style Anchor · button style

Layout

Using Button

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

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

Root class btn, with 23 modifiers:

.btn
.btn-accent
.btn-active
.btn-block
.btn-circle
.btn-dash
.btn-error
.btn-ghost
.btn-info
.btn-lg
.btn-link
.btn-md
.btn-neutral
.btn-outline
.btn-primary
.btn-secondary
.btn-sm
.btn-soft
.btn-square
.btn-success
.btn-warning
.btn-wide
.btn-xl
.btn-xs

React

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

npm i @wizeworks/silicaui-react

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

Props

Prop	Type	Required	Description
color	ButtonColor	no	Semantic or custom color; maps to btn-<color>.
variant	ButtonVariant	no	How the color is applied. Default solid.
size	ButtonSize	no	Default md.
shape	"square" \| "circle"	no	Icon-only button shape.
block	boolean	no	Full-width.
wide	boolean	no	Extra-wide.
active	boolean	no	Force the pressed look.
loading	boolean	no	Show a spinner, set aria-busy, and make the button non-interactive.
iconStart	React.ReactNode	no	—
iconEnd	React.ReactNode	no	—
render	React.ReactElement	no	Render as a different element (e.g. an anchor or router link) while keeping Silica's classes and behavior. Mirrors Base UI's render composition model.

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 { useState } from "react";
import { Button } from "@wizeworks/silicaui-react";
import { Section, Row, Stack } from "../lib/Section";
import { ColorVariantSizeGrid } from "../lib/ColorGrid";
import { PlusIcon } from "../lib/icons";
import { VARIANTS } from "../lib/data";

export function ButtonDemo() {
    const [loading, setLoading] = useState(false);

    function fakeSave() {
        setLoading(true);
        setTimeout(() => setLoading(false), 1800);
    }

    return (
        <>
            <ColorVariantSizeGrid
                Component={Button}
                variants={VARIANTS.filter((v) => v !== "solid")}
            />

            <Section title="Icon buttons (square / circle)">
                <Row>
                    <Button color="primary" shape="square" aria-label="Add">
                        <PlusIcon />
                    </Button>
                    <Button color="secondary" shape="circle" aria-label="Add">
                        <PlusIcon />
                    </Button>
                    <Button color="accent" variant="outline" shape="circle" aria-label="Add">
                        <PlusIcon />
                    </Button>
                    <Button color="brand" iconStart={<PlusIcon />}>
                        with icon
                    </Button>
                </Row>
            </Section>

            <Section title="States">
                <Row>
                    <Button color="primary" loading={loading} onClick={fakeSave}>
                        {loading ? "Saving…" : "Click to load"}
                    </Button>
                    <Button color="primary" disabled>
                        Disabled
                    </Button>
                    <Button color="primary" variant="outline" active>
                        Active
                    </Button>
                </Row>
            </Section>

            <Section title="Polymorphism · render → a real <a href>">
                <Row>
                    <Button
                        color="brand"
                        variant="link"
                        render={<a href="https://example.com" />}
                    >
                        Anchor · link style
                    </Button>
                    <Button color="brand" render={<a href="https://example.com" />}>
                        Anchor · button style
                    </Button>
                </Row>
            </Section>

            <Section title="Layout">
                <Stack className="w-full">
                    <Button color="primary" block>
                        Block
                    </Button>
                    <Button color="neutral" variant="outline" wide>
                        Wide
                    </Button>
                </Stack>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Button — a <button>, or an <a> when it carries an href; label is text sugar. 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("Button", "btn", { /* 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 "btn btn-primary" rather than passing a colour as a prop.

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

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