Button

Primary action component. Renders as <button> or <a> depending on href.

Usage

{% include components/button.html
   label="Get Started"
   href="/pricing/"
   variant="primary"
   size="lg"
   ripple=true
%}

Parameter	Type	Default	Description
`label`	string	—	Button text
`href`	string	—	If set, renders as link
`variant`	string	`primary`	`primary` `secondary` `outline` `ghost` `danger` `success`
`size`	string	`md`	`sm` `md` `lg`
`type`	string	`button`	`button` `submit` `reset`
`disabled`	boolean	false	Disabled state
`ripple`	boolean	false	Show a pointer-positioned ripple on click and a centered ripple on keyboard activation
`modal_open`	string	—	Modal id to open when the button is clicked
`icon`	string	—	Icon name
`icon_position`	string	`left`	`left` `right`
`icon_only`	boolean	false	Icon-only button
`block`	boolean	false	Full width
`class`	string	—	Extra classes
`id`	string	—	Element id
`aria_label`	string	—	Accessible label

Uses native <button> or <a role="button">
Visible focus ring via :focus-visible
disabled / aria-disabled supported
Set ripple=true to enable the decorative ripple; it respects prefers-reduced-motion
Icon-only buttons require aria_label or label