Component APIs

Complete API reference for all Matrix UI components with prop definitions, types, and usage examples.

Button

A clickable button component with multiple variants and sizes

Import

import { Button } from '@matrix-ui/components'

Props

Prop	Type	Default	Description
variant	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	"default"	The visual style variant
size	`"sm" \| "default" \| "lg"`	"default"	The size of the button
asChild	`boolean`	false	Render as child element
disabled	`boolean`	false	Disable the button
className	`string`	-	Additional CSS classes
loading	`boolean`	false	Show loading spinner
leftIcon	`ReactNode`	-	Icon to display on the left
rightIcon	`ReactNode`	-	Icon to display on the right
fullWidth	`boolean`	false	Make button full width
onClick	`() => void`	-	Click event handler

Examples

Basic Usage

<Button>Click me</Button>

With Variants

<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>

With Sizes

<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>

As Link

<Button asChild>
  <a href="/home">Go Home</a>
</Button>

With Loading State

<Button loading>
  Saving...
</Button>

With Icons

<Button leftIcon={<PlusIcon />}>
  Add Item
</Button>

<Button rightIcon={<ArrowRightIcon />}>
  Continue
</Button>

Full Width

<Button fullWidth>
  Submit Form
</Button>

Common Props

Most Matrix UI components accept these common props:

Prop	Type	Description
className	`string`	Additional CSS classes to apply
style	`CSSProperties`	Inline styles
children	`ReactNode`	Child elements
asChild	`boolean`	Render as the child element (Radix UI slot)

TypeScript Support

All components are fully typed. Import types alongside components:

import { Button, type ButtonProps } from '@matrix-ui/components'

interface MyComponentProps {
  buttonProps?: ButtonProps
}

function MyComponent({ buttonProps }: MyComponentProps) {
  return <Button {...buttonProps}>Click me</Button>
}