Headless Core — Alert

Powers Alert internally. A single inline status message — compare with Toast, its floating, auto-dismissing, queued relative.

Usage

import { createAlert } from '@andersseen/headless-components/alert';

const alert = createAlert({
  variant: 'destructive',
  dismissible: true,
  onDismiss: () => console.log('Alert dismissed'),
});

alert.actions.setVariant('success');
alert.actions.dismiss();

Config

Option	Type	Default
variant	'default' | 'destructive' | 'success' | 'warning' | 'info'	'default'
dismissible	boolean	false
defaultVisible	boolean	true
onDismiss	() => void	—
onVisibilityChange	(visible: boolean) => void	—

State

variant, visible, dismissible.

Actions

dismiss() (no-ops unless both dismissible and currently visible), show(), setVariant(v), setDismissible(v) — no queries bucket; read alert.state.visible directly.

Prop-getters

getAlertProps() returns role, aria-live, aria-atomic: true, data-state, data-variant. destructive and warning variants get role="alert" + aria-live="assertive" (interrupts screen readers immediately); every other variant gets role="status" + aria-live="polite" (announced without interrupting) — the factory picks this for you based on variant, you don’t set it directly.

getDismissButtonProps() returns aria-label: 'Dismiss alert', type: 'button'.

Live example

Cycle variant Dismiss Show again

Next steps

Toast — the floating, queued, auto-dismissing relative of this same “status message” idea.