Button

A versatile interactive button component with multiple variants, sizes, and states

Usage

import { Button } from '@accelint/design-toolkit';

export function MyComponent() {
  return <Button>Click me</Button>;
}

Reference

interface ButtonProps extends AriaButtonProps {
  color?: 'mono-muted' | 'mono-bold' | 'accent' | 'serious' | 'critical';
  size?: 'xsmall' | 'small' | 'medium' | 'large';
  variant?: 'filled' | 'outline' | 'flat' | 'icon';
  className?: string;
  children?: React.ReactNode;
}

Props

Prop	Type	Default	Required
`children`	`React.ReactNode`	-	No
`color`	`'mono-muted' \| 'mono-bold' \| 'accent' \| 'serious' \| 'critical'`	`'mono-muted'`	No
`size`	`'xsmall' \| 'small' \| 'medium' \| 'large'`	`'medium'`	No
`variant`	`'filled' \| 'outline' \| 'flat' \| 'icon'`	`'filled'`	No
`className`	`string`	-	No
`onPress`	`(e: PressEvent) => void`	-	No
`isDisabled`	`boolean`	`false`	No

`color`

Semantic color variant that controls the button's visual appearance:

mono-muted - Default neutral styling
mono-bold - Bold neutral styling
accent - Accent color emphasis
serious - Warning or important actions
critical - Destructive or high-impact actions

`variant`

Visual style variant:

filled - Solid background (default)
outline - Border with transparent background
flat - No border or background, text only
icon - Icon-only button with minimal chrome

`size`

Controls button padding and font size. The size prop also automatically sizes nested Icon components via context.

Available sizes: xsmall, small, medium, large

Inherited Props

Button inherits all props from React Aria's Button component, including:

onPress - Called when the button is pressed
isDisabled - Disables the button
type - HTML button type (button, submit, reset)
form - Associates button with a form by ID

See React Aria Button for full API reference.

Examples

Example: Primary action button

import { Button } from '@accelint/design-toolkit';

<Button variant="filled" color="accent" onPress={() => console.log('Saved')}>
  Save Changes
</Button>

Example: Destructive action

import { Button } from '@accelint/design-toolkit';

<Button variant="outline" color="critical" onPress={() => handleDelete()}>
  Delete Account
</Button>

Example: Button with icon

import { Button, Icon } from '@accelint/design-toolkit';
import { Plus } from '@accelint/icons';

<Button variant="flat">
  <Icon><Plus /></Icon>
  Add Item
</Button>

Example: Icon-only button

import { Button, Icon } from '@accelint/design-toolkit';
import { Settings } from '@accelint/icons';

<Button variant="icon" aria-label="Settings">
  <Icon><Settings /></Icon>
</Button>

Good to know: When using the icon variant, always provide an aria-label for accessibility since there's no visible text.

Example: Different sizes

import { Button } from '@accelint/design-toolkit';

<>
  <Button size="xsmall">Extra Small</Button>
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</>

Example: Disabled state

import { Button } from '@accelint/design-toolkit';

<Button isDisabled onPress={() => console.log('Never called')}>
  Unavailable
</Button>

LinkButton - Link styled as a button
ToggleButton - Toggle button component
Icon - Icon component with automatic sizing from Button context

Button

On this page