Actions

Button.

A clear next step, with room for the supporting actions.

LIVE PREVIEWTry it. It works.

Usage

React / TypeScript
<Button>Save changes <Icon /></Button>
<Button variant="accent">Start a study</Button>
<Button variant="secondary">Cancel</Button>

Import components from @bld8/ui and include @bld8/ui/styles.css once. Wrap the application in UIProvider.

API & behaviour

variant: primary | accent | secondary | ghost | danger. Primary is near-black on light surfaces; accent is yellow with dark text. size: sm | md | lg. loading disables repeat submissions and exposes aria-busy. Native button props and ref are forwarded.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.