Button

A flexible button component built on React Aria's Button component with multiple variants, sizes, and states.

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'outlined' \| 'text' \| 'link'`	`'outlined'`	Visual style variant
`primary`	`boolean`	`false`	Apply primary color styling
`danger`	`boolean`	`false`	Apply danger color styling
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`isLoading`	`boolean`	`false`	Show loading state
`isDisabled`	`boolean`	`false`	Whether the button is disabled
`icon`	`ReactNode`	-	Optional icon to display
`children`	`ReactNode`	-	Button content/label
`className`	`string`	-	Additional CSS classes

Extends all React Aria ButtonProps.

Usage Examples

Different Sizes

tsx

function Buttons() {
  return (
    <div className="flex gap-4">
      <Button primary size="sm" variant="solid">
        Click Me
      </Button>
      <Button primary variant="solid">
        Click Me
      </Button>
      <Button primary size="lg" variant="solid">
        Click Me
      </Button>
    </div>
  );
}

Different types

tsx

function Buttons() {
  return (
    <div className="flex gap-4">
      <Button primary variant="solid">
        primary
      </Button>
      <Button danger variant="solid">
        danger
      </Button>
      <Button>default</Button>
      <Button variant="text">text</Button>
    </div>
  );
}

Disabled

tsx

function Buttons() {
  return (
    <div className="flex gap-4">
      <Button isDisabled primary variant="solid">
        primary
      </Button>
      <Button isDisabled danger variant="solid">
        danger
      </Button>
      <Button isDisabled>default</Button>
      <Button isDisabled variant="text">
        text
      </Button>
    </div>
  );
}

Styling

CSS Variables

The component uses the following CSS variables for theming:

--color-font: Default button text color
--color-font-surprise: Primary button text color
--color-font-danger: Danger button text color
--color-bg: Button background color (default)
--color-surprise: Primary button background color
--color-danger: Danger button background color
--hl: Default border color (outlined)
--hl-xs: Subtle highlight (hover, pressed, focus)

You can customize these variables in your CSS to theme the button appearance.