Button Component

The Button component provides a flexible, accessible button with multiple style variants, loading states, icon support, and automatic color theming based on container context.

Usage

Basic Button

<Button label="Click me" />

Button Types

The button supports six visual variants: solid (default), outlined, dashed, filled, text, and link.

<Button type="solid" label="Solid" />
<Button type="outlined" label="Outlined" />
<Button type="dashed" label="Dashed" />
<Button type="filled" label="Filled" />
<Button type="text" label="Text" />
<Button type="link" label="Link" />

Status Colors

Buttons support different status colors for semantic meaning.

<Button status="primary" label="Primary" />
<Button status="success" label="Success" />
<Button status="warning" label="Warning" />
<Button status="danger" label="Danger" />
<Button status="neutral" label="Neutral" />

Loading State

When loading is true, the button shows a loading spinner and becomes disabled.

<Button loading label="Loading..." />
<Button loading type="outlined" label="Processing" />

Disabled State

<Button disabled label="Disabled" />
<Button disabled type="outlined" label="Disabled" />

With Icons

Buttons can display icons at the start or end of the label.

<Button icon="check" label="Save" />
<Button icon="arrow-right" iconPosition="end" label="Next" />
<Button icon="plus" type="outlined" label="Add Item" />

As Link

When an href is provided, the button renders as an anchor element.

Visit Site

Open in new tab

<Button href="https://example.com" label="Visit Site" />
<Button
  href="https://example.com"
  target="_blank"
  type="text"
  label="Open in new tab"
/>

Combined Status and Type

Mix status colors with button types for varied visual styles.

<Button status="success" type="solid" label="Solid" />
<Button status="success" type="outlined" label="Outlined" />
<Button status="danger" type="solid" label="Solid" />
<Button status="danger" type="filled" label="Filled" />

Props

Name	Type	Default	Description
`label`	`string`	undefined	Text content displayed inside the button
`status`	`Status`	from ContainerContext or 'neutral'	Status for color theming (e.g., 'success', 'error', 'primary', 'neutral')
`type`	`'solid' \| 'outlined' \| 'dashed' \| 'filled' \| 'text' \| 'link'`	'solid'	Visual style variant of the button
`loading`	`boolean`	undefined	Shows a loading spinner and disables the button when true
`disabled`	`boolean`	undefined	Disables the button when true
`icon`	`string`	undefined	Icon name to display in the button
`iconPosition`	`'start' \| 'end'`	'start'	Position of the icon relative to the label
`onClick`	`() => void`	undefined	Click handler function
`href`	`string`	undefined	If provided, renders as an anchor element instead of button
`target`	`string`	undefined	Target attribute for anchor element (e.g., '_blank')
`styles`	`StyleXStyles`	undefined	Additional StyleX styles to apply to the button
`iconStyles`	`StyleXStyles`	undefined	Additional StyleX styles to apply to the icon

Button Types

The Button component provides six visual variants to suit different use cases:

solid - Filled background with contrasting text (default)

outlined - Transparent background with colored border

dashed - Transparent background with dashed border

filled - Lighter background fill with darker text

text - No background or border, just colored text

link - Similar to text but with hover background

Container Context

When placed inside a Container component, the Button automatically adapts its styling based on the container's depth and status. The border radius adjusts to nest properly within containers, and colors are adjusted for better contrast against the container background.

// Button inherits status and adapts radius from container
<Container status="primary">
  <Button label="Inherits Primary" />
</Container>

Accessibility

The Button component includes several accessibility features:

Focus-visible outline for keyboard navigation

Proper disabled state that prevents interaction

Renders as native button or anchor element for proper semantics

Respects prefers-reduced-motion for animations