Components

Button

Triggers an action. Styled entirely from semantic tokens, so it re-themes automatically across all four brand × scheme combinations.

Variants

Sizes

States

Usage

import { Button } from '@solace/ui';
import '@solace/ui/styles.css';

<Button variant="primary" size="lg">Explore foundations</Button>

// Render as a link without losing button styling:
<Button asChild>
  <a href="/foundations">Foundations</a>
</Button>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'primary'`	Visual emphasis.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`asChild`	`boolean`	`false`	Render as the child element (e.g. a link) via Radix Slot.
`disabled`	`boolean`	`false`	Disables the button.
`...props`	`ButtonHTMLAttributes`	`—`	All native button attributes.

Accessibility

Renders a native <button> by default — full keyboard and screen-reader support.
Visible focus ring via the color.focus.ring token.
With asChild, ensure the child is an appropriate interactive element.