Button

Use the full-color (500) accent background from the current `tone` color with contrast text. Only available on `primary` and `ghost` emphasis — `primary` sets this to `true` by default.

Background style — only available when `emphasis="secondary"`. `surface.peak`: lightest. `surface.hill–3`: intermediate. `surface.ground`: darkest. `transparent`: no background.

Border style. `none`: no border. `default`: standard border. `bold`: stronger emphasis. `muted`: subtle separation.

Border shown only on hover/press, composed over `border` (the rest state). `ghost` buttons default to `default` (no border at rest, one on hover); set it on any other emphasis to get the same hover outline — e.g. a filled `secondary`/`adaptive` button with `border="none"`.

Visual emphasis level. `primary`: solid accent background with contrast text. `secondary`: neutral surface with a border. `ghost`: transparent until hovered. `adaptive`: transparent and inherits text color from the parent — pair with `tone="inherit"` to fully follow the context.

Shape variant. `pill`: fully rounded corners. `circle`: equal width/height circle. `square`: equal width/height square.

Size variant. Shares the same height system as inputs.

Semantic color tone. `neutral`: greyscale. `primary`: brand palette. `success`: green. `warning`: orange. `danger`: red. `inherit`: keep the ambient `colorPalette` from the parent unchanged — combine with `emphasis="adaptive"` for a fully context-following button.

Apply a frosted-glass effect with backdrop blur. Works with surface backgrounds.

Border-radius override. Accepts the full spacing scale plus `full` for fully rounded corners. Overrides the default size-proportional radius.

Border radius for the bottom-left and bottom-right corners.

Border radius for the top-left and bottom-left corners.

Border radius for the top-right and bottom-right corners.

Border radius for the top-left and top-right corners.

Constrain a child SVG to the button's content box (`width`/`height: 100%`), useful for icon-only buttons.

Link mode. Setting `href` renders the button as an `<a>` with the same recipe, sizes, emphasis/tone, affixes, focus ring and disabled look — for actions that navigate (open a page, a `mailto:`, WhatsApp in a new tab). Button-only attributes (`type`, `form*`, `name`, `value`, `popovertarget`) are dropped; anchor attributes (`target`, `rel`, `download`, `hreflang`, `referrerpolicy`, `ping`) are forwarded. `target="_blank"` gets `rel="noopener noreferrer"` unless you set `rel`. A disabled link drops its `href` and is marked `role="link"`, `aria-disabled="true"`, `tabindex="-1"`. Links activate on Enter only — Space scrolls the page, as it does for every native link.

Button label / content.

Leading addon content (icon/badge). Rendered inside an affix box the Control Var Contract aligns — pass a `<Stamp emphasis="ghost">` for icons. Style the box via `passThrough.leading`.

Trailing addon content. Rendered inside an end-pinned affix box.

Bound reference to the underlying element (`bind:this`) — an `<a>` in link mode, otherwise a `<button>`.

Per-slot style and HTML-attribute overrides (`root`). The slot accepts `style` (a Panda style object merged into the slot's class) and `props` (extra attributes spread onto the element). Icon/addon boxes are composed as `<Affix>` children, which carry their own `passThrough`.