1 viewer
Back to Components
Component · Input

Button

Accessible action primitive.

Category
Input
Slots
1
States
3
Writer
Shared
cre8.primitive.button

Preview

Live renderShared SSR + WASM writers
<Row gap="12px">
  <Button intent="primary" label="Primary Action" />
  <Button intent="secondary" label="Secondary Action" />
  <Button intent="ghost" label="Ghost Action" />
  <Button intent="danger" label="Destructive" />
  <Button disabled={true} label="Disabled" />
</Row>

Variants

States and intents

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-button
1 row

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
disabledpressedloading
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Button renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-form-controlready
terminalterminal-actionplanned
nativenative-adapterexperimental
5 rows

Accessibility

Uses native button semantics by default.

  • Disabled and pressed states must be exposed semantically.
  • Loading buttons stay inert and expose a busy state without requiring recipe-only affordances.