Button

Button renders actions. North uses it instead of raw <button> elements. The default type is button. Set type="submit" to submit a form with the primary or ghost variant.

import Button from "@haloid/azucar/ui/button";

Variants

primary is the aqua surface: the one moment of color in a monochrome interface. It carries the main action of a view. Its weight comes from being rare. If two primaries appear in the same view, one of them is wrong.

ghost is quiet text that changes to full foreground on hover. It is the default choice for secondary actions, list items, and navigation. The sidebar and the menubar are built from it.

secondary is a stub. It renders the literal string "not yet implemented". Do not use it.

Pick from the panel or edit the code. The preview follows both.

<Button variant="primary">Reconcile facility</Button>

Loading

Set loading while an action runs. Primary and ghost buttons show a spinner, disable interaction, and expose aria-busy.

The spinner respects reduced-motion preferences. The parent supplies the loading label and controls when loading ends.

This button shows a pending action.

<Button loading>Saving…</Button>

Color

The aqua-* utilities from azucar.css remap the primary surface: aqua-green, aqua-red, aqua-orange, aqua-gray, aqua-black, aqua-white. Pass them as className. They change only the three surface custom properties. The halo and the inset ring stay 1px at any size.

Color is an event, not a system element. The default aqua is already the one moment of color in a view. A remapped surface must mean something: destructive, confirmed, halted. It must never decorate. aqua-white needs a dark label. The default white text does not read on it.

API

interface Props extends React.AriaAttributes {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "ghost"; // default "primary"
  className?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  type?: "button" | "submit" | "reset"; // default "button"
  disabled?: boolean;
  loading?: boolean;
  title?: string;
}

Primary and ghost buttons forward type, disabled, title, and ARIA attributes. Keyboard focus has a visible outline.

Use aria-label to name an icon-only action. Use aria-pressed for a toggle, such as password visibility.

size, href, and ref forwarding are not supported. Use Link from @haloid/azucar/ui/link for navigation.