Button

Buttons trigger actions. Use for primary, secondary, ghost, and tertiary (utility-only, neutral filled) actions with configurable appearance, intent, and size.

Overview

The catnip-button component renders a native button element with consistent styling. It supports leading/trailing icons, icon-only mode, semantic intent (default, danger), and an optional loading state (aria-busy + native disabled + catnip-button--loading class). Note: using the same disabled look for loading is interim until UX defines final loading visuals; you supply spinners or labels via slots or icons.

Appearance rules: tertiary requires purpose="utility"; otherwise the component renders as primary. size="xs" requires purpose="utility"; otherwise the button renders as s. intent="danger" is only supported with appearance primary or ghost; other combinations render as primary + danger. Invalid combinations log a dev-mode console warning.

selected: Only applies with purpose="utility" (e.g. utility toggle groups); sets aria-pressed and dedicated selected styles via catnip-button--selected (primary: filled pressed; other appearances: subtle fill + primary border).

Live example

Accessibility

• Native <button> with disabled — no redundant aria-disabled; the disabled attribute is enough for assistive technology (including when loading forces disabled).
• loading: sets aria-busy="true", uses native disabled (same as disabled prop for interaction), and adds catnip-button--loading. Interim: this disabled look-and-feel for loading is provisional until UX signs off on final loading patterns; the accessible contract (aria-busy, no activation) should remain. Spinner/label visuals are yours (e.g. leftIconSlot with catnip-spinner).
• Icon-only (no visible label): set aria-label so the control has an accessible name. In development, a console warning is logged if an icon-only button has no aria-label.
• type: defaults to button so buttons inside forms do not accidentally submit; use submit / reset only when intended.
• Meet contrast requirements for text and icons on the button surface (WCAG AA).