Quill docs

Button

An action or toggle. The fill is one of four variants (solid, soft, outline, ghost), orthogonal to size and tone. Use a solid brand button for the primary action; prefer ghost or outline for secondary actions; reserve danger tone for destructive actions.

Preview#

Every fill variant, size, and tone — server-rendered, correct with JavaScript off.

variant

size

tone

Playground#

Change the controls — the preview and the snippet update live.

Variant

Size

Tone

Button::action("Button")
    .variants(
        Variants::new()
            .variant(Variant::Solid)
            .size(Size::Md)
            .tone(Tone::Brand),
    )
    .render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Variant

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .attr("data-q-variant", "solid")
    .child(
        Button::action("Button")
            .variants(Variants::new().variant(Variant::Solid))
            .render()
    )

Code#

Construct the component with its builder:

Button::action("Save changes")
    .variants(
        Variants::new()
            .variant(Variant::Solid)
            .size(Size::Md)
            .tone(Tone::Brand),
    )
    .render()