Button

Button stays deliberately small: native button markup, one namespaced root hook, one optional accent variant, native disabled state, and no JavaScript requirement.

Public web API

The durable contract should come first, with examples grouped separately below it.

<button type="button" data-bitsy-button>Save draft</button>
<button type="submit" data-bitsy-button data-bitsy-variant="accent">Create account</button>
<button type="button" data-bitsy-button disabled>Archive</button>

button remains the native element.
data-bitsy-button is the current web hook.
default and accent are the semantic variant names.
disabled stays native.

Reference examples

The examples are grouped by use so the page reads like reference material instead of a loose sandbox.

States and supporting visuals

Local action group

Keep one emphasized action in the local cluster and leave supporting actions neutral.

Plain form usage

Foundation versus Bit

What this Bit covers

Plain button actions.
One explicit accent variant.
Native disabled state.
Optional supporting glyphs inside the label row.

What stays out of scope

Links styled as buttons.
Icon-only controls.
Menu buttons or split buttons.
JavaScript-dependent behavior.