Headless Core — Button

Powers Button (@andersseen/web-components) and and-vanilla-button (@andersseen/vanilla-components) internally. The simplest factory in the package — a good first read if you’re new to the state/actions/queries/prop-getter shape every other factory follows.

Usage

import { createButton } from '@andersseen/headless-components/button';

const button = createButton({
  onClick: e => console.log('clicked'),
  disabled: false,
});

button.actions.setLoading(true);
const props = button.getButtonProps();

Config

Option	Type	Default	Notes
disabled	boolean	false
loading	boolean	false
type	'button' | 'submit' | 'reset'	'button'
onClick	(event: MouseEvent) => void	—	Only fires when not disabled and not loading.
ariaLabel	string	—

State

Field	Type	Notes
disabled	boolean
loading	boolean
type	'button' | 'submit' | 'reset'

Actions & queries

Member	Signature	Notes
actions.setDisabled(v)	(disabled: boolean) => void
actions.setLoading(v)	(loading: boolean) => void
queries.isDisabled()	() => boolean	true if disabled or loading.
queries.isLoading()	() => boolean

Prop-getter & handler

getButtonProps() returns type, disabled, tabindex (-1 when disabled), aria-disabled, aria-busy (mirrors loading), aria-label, data-state ('active' | 'inactive'), data-disabled.

handleClick(event) guards disabled/loading (calls event.preventDefault() and returns early) before invoking your onClick.

Live example

The actual, unmodified return value of createButton(), live on this page — click to run handleClick, or toggle loading to see aria-busy flip:

Click me Toggle loading

Next steps

Primitives — the StateStore every factory’s state/subscribe is built on.