Button

The inherited Ecology button, wearing the Beacon skin. Primary is Beacon teal because the theme keeps --color-background-brand at teal-900; the rest of the palette is inherited.

Inherited.astroimport EsaButton from '@esa/ecology/esa-button.astro';

Colors

<EsaButton variant="primary">Save</EsaButton>

Outline

<EsaButton variant="primary" appearance="outline">Save</EsaButton>

Sizes

<EsaButton size="xs">Save</EsaButton>

API

Prop	Type	Default	Description
`color`	`'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' \| 'info' \| 'ai' \| 'ghost'`	`'primary'`	Semantic color role. Beacon teal comes from --color-background-brand (teal-900).
`appearance`	`'fill' \| 'outline'`	`'fill'`	Solid or outlined.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`disabled`	`boolean`	`false`	Non-interactive state.
`loading`	`boolean`	`false`	Shows a spinner and blocks input.