Button

Actions

Takes a block

Button. Its block holds what it shows; on click what it does.

Button(label, tone: …, size: …, shape: …) { … }

Example

Button("Save").primary { on click { log("saved") } } Button("Delete").danger.outlined.sm Button("Send", type: .submit).primary.full

Renders with the class wf-btn, stable across releases, so a stylesheet may target it.

Props of Button
Prop Type Meaning
label String (positional)

The label

tone: .primary .secondary .success .danger .warning .info

Colour

size: .sm .md .lg

Its size

shape: .rounded .pill

Corner shape

width: .full

Width

outlined: Bool

A border and no fill

type: .button .submit .reset

Its role inside a form

to: Path

Route to navigate to; the link whose to matches the current route carries .active and aria-current="page"

disabled: Bool

Whether the control is inert

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.