Button

Props

Prop	Type	Default	Options	Description
appearance	string	"primary"	primary, secondary, ghost, tertiary	Visual weight of the button. tertiary is only valid with purpose="utility" (neutral subtle fill, no border); otherwise the button renders as primary (dev warning).
size	string	"m"	xs, s, m, l	Controls dimensions, padding, and typography. xs is only valid with purpose="utility"; otherwise the button renders as s (dev warning).
intent	string	"default"	default, danger	Semantic intent — changes the color scheme. danger is only supported with appearance primary or ghost; other appearances render as primary + danger (dev warning).
purpose	string	"main"	main, utility	Layout role: main (pill) or utility (squared corners)
disabled	boolean	false	—	Disables the button and applies disabled styles
loading	boolean	false	—	Busy state: aria-busy="true", native disabled, and class catnip-button--loading. Interim: using full disabled styling/behavior for loading is temporary until UX finalizes the loading design (semantics stay: busy + non-interactive). Add your own spinner via slots / icons.
selected	boolean	false	—	Toggle / selected-on state for purpose="utility" only; ignored otherwise (dev warning). Sets aria-pressed="true" and class catnip-button--selected. Primary: strong pressed background with on-primary text. Secondary, ghost, tertiary: primary subtle background, primary strong border, primary strong text.
leftIcon	string	""	Valid CatnipIconName	Icon name for the left position
rightIcon	string	""	Valid CatnipIconName	Icon name for the right position
ariaLabel	string	""	—	Accessible label — required for icon-only buttons
type	string	"button"	button, submit, reset	Native button type attribute
name	string	""	—	Native name — optional; use with forms (submit/reset) or when you need a stable identifier in the DOM
value	string	""	—	Native value — submitted with name for submit / reset
form	string	""	—	Native form — id of a <form> when the button is not a descendant of that form
autofocus	boolean	false	—	Native autofocus — use sparingly (accessibility: prefer explicit focus management in modals)
testSelectors	object	See Test Selectors	—	Override data-test attributes for testing

See Component API — Props.

Slots

Name	Description
leftIconSlot	Custom left icon position. Overrides the leftIcon prop. Accepts <catnip-icon>, SVGs, or any element.
(default)	Button text. When empty and an icon is provided, the button uses icon-only layout automatically.
rightIconSlot	Custom right icon position. Overrides the rightIcon prop. Accepts <catnip-icon>, counters, or any element.

See Component API — Slots.

Test Selectors

Attribute	Default Value
root	catnip-button

See Component API — Test selectors.