Button

import { Button } from '@yarcl/react';

Variants

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

SolidSoftOutlineGhost

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

Colors

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

PrimaryNeutralSuccessWarningDangerInfo

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

Sizes

size accepts the keys allowed for Button in your sizes configuration. A button and an Input of the same base size have the same height unless either component overrides it.

xssmmdlgxl

Use autoHeight for multiline content such as an account row. The selected size still determines the minimum height, font, icons and padding. This works for both action buttons and links.

<Button autoHeight variant="ghost">
  <Avatar name="Ada Lovelace" />
  <Stack gap="xs">
    <Text>Ada Lovelace</Text>
    <Text textStyle="caption" muted>ada@example.com</Text>
  </Stack>
</Button>

See the account menu recipe.

Radius

squaresmmdlgrounded

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

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

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

With icons

Use startIcon or endIcon to place a decorative icon beside the label. The icon is sized from the control size’s iconSize, and the gap follows its horizontal padding. The label supplies the accessible name.

<Button startIcon={<CheckIcon />}>Mark complete</Button>
<Button href="/next" endIcon={<ArrowRightIcon />}>Next lesson</Button>

Plain <svg> children still use the control size’s iconSize.

New projectDelete

Loading

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

Save changes

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

Accessibility

• 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.
• With href, renders a native <a> that keeps link semantics, keyboard behavior, and open-in-new-tab support. Pass target and rel as native anchor props. loading, disabled and button type apply only to the action form.

<Button href="/checkout">Enroll in the course</Button>

For client-side routing, use the router link recipe.

Props

Without href, accepts native <button> attributes except color. With href, accepts native anchor attributes except color and button-only props.

Prop	Type	Default	Description
autoHeight	boolean		Lets multiline content determine the height, keeping the size token as the minimum height.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
endIcon	ReactNode		Decorative icon after the label, sized from the control size.
href	undefined
loading	boolean		Shows a Spinner, disables the button and sets aria-busy.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
startIcon	ReactNode		Decorative icon before the label, sized from the control size.
variant	Variantconfig	config.defaults.variant	Style recipe, from the component's variant map or the shared variants config.

Prop	Type	Default	Description
href required	string		Destination. Renders a native link with the same visual styles as a button.
autoHeight	boolean		Lets multiline content determine the height, keeping the size token as the minimum height.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
disabled	undefined
endIcon	ReactNode		Decorative icon after the label, sized from the control size.
loading	undefined
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
startIcon	ReactNode		Decorative icon before the label, sized from the control size.
type	undefined
variant	Variantconfig	config.defaults.variant	Style recipe, from the component's variant map or the shared variants config.