Button

import { Button } from 'yarcl';

Variants

variant accepts the keys of your config’s variants. These examples use the library defaults: solid, soft, outline and ghost.

<Button>Solid</Button>
<Button variant="soft">Soft</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

color accepts the keys of your config’s colors. The text color on each background is computed for contrast in light and dark mode.

<Button color="danger">Danger</Button>

size accepts the keys of your config’s sizes. A button and an Input of the same size always have the same height.

<Button radius="rounded">rounded</Button>

To make every button square without touching call sites, set a component default:

components: { Button: { radius: 'square' } }

An <svg> inside a button is sized from the size’s iconSize.

loading shows a Spinner, disables the button and sets aria-busy. The button keeps its height.

<Button loading={saving} onClick={save}>Save changes</Button>

Renders a native <button> with type="button" by default, so it never submits a form by accident. Pass type="submit" when it should.
Disabled buttons use the native disabled attribute.

Accepts every native <button> attribute except color.

Prop	Type	Default	Description
`color`	`Color`config	`config.defaults.color`	Semantic color, from the `colors` config.
`loading`	`boolean`		Shows a Spinner, disables the button and sets `aria-busy`.
`radius`	`'size' \| Radius`config	`config.defaults.radius`	Border radius, from the `radii` config, or `'size'` for the radius named like the control's size.
`size`	`Size`config	`config.defaults.size`	Control size, from the `sizes` config.
`variant`	`Variant`config	`config.defaults.variant`	Style recipe, from the `variants` config.