Button

The inherited Ecology button, wearing the Biochar Atlas skin. Primary picks up the forest green because the theme re-points --color-primary — this is the “Evaluate suitability” green; the rest of the palette is inherited.

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

Colors

<EsaButton color="primary">Evaluate suitability</EsaButton>

Outline

<EsaButton color="primary" appearance="outline">Evaluate</EsaButton>

Sizes

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

With icons

Pass a Lucide icon name via icon; add iconOnly to drop the label.

<EsaButton icon="download">Download report</EsaButton>
<EsaButton icon="plus" iconOnly aria-label="Add biochar" />

States

<EsaButton color="ghost">Cancel</EsaButton>
<EsaButton disabled>Disabled</EsaButton>
<EsaButton loading>Scoring</EsaButton>

API

Prop	Type	Default	Description
`color`	`'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' \| 'info' \| 'ai' \| 'ghost'`	`'primary'`	Semantic color role. Biochar forest green comes from --color-primary.
`appearance`	`'fill' \| 'outline' \| 'dashed'`	`'fill'`	Solid, outlined, or dashed-outline.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Control size (shared form scale).
`icon`	`string`	—	Lucide icon name, shown left of the label.
`iconOnly`	`boolean`	`false`	Icon-only mode (no text).
`active`	`boolean`	`false`	Pressed/active state.
`disabled`	`boolean`	`false`	Non-interactive state.
`loading`	`boolean`	`false`	Shows a spinner and blocks input.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.