StellarUI

<stellar-button>

Component

Example

Button

Copy

<stellar-button>Button</stellar-button>

Complete props, events, slots, and implementation notes for the shipped button.

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`solid \| outline \| dash \| soft \| ghost \| link`	`solid`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`shape`	`'' \| square \| circle`	`''`
`width`	`'' \| wide \| full`	`''`
`disabled`	`boolean`	`false`
`state`	`'' \| active`	`''`
`icon`	`string`	`''`
`href`	`string`	`''`
`type`	`button \| submit \| reset`	`button`

Event	Source	Notes
`click`	native	Passed through from the rendered `<button>` or `<a>`.
`focus` / `blur`	native	Use normal DOM listeners on the custom element.
custom events	none	`stellar-button` does not emit custom events.

Slot	Notes
default	Button label or icon content. Square and circle shapes are intended for compact icon content.

The public tag is `stellar-button`, backed by a real `<button>` by default and `<a>` when `href` is present.
The shipped API is `tone`, `appearance`, `size`, `shape`, `icon`, `width`, `state`, `href`, and `type`.
The docs page now uses Datastar controls to drive one live button instance instead of showing a static permutation matrix.
`stellar-button` uses `mode: 'open'`, so its styles stay encapsulated while still reading exported `stellar.css` variables through the shadow boundary.
The `icon` prop renders a built-in `stellar-icon` before the label, so common icon buttons do not need manual icon slot markup.
The visual baseline follows the shipped button sizing, tone, and appearance behavior without reintroducing the old parity surface.