Button

Button is a clickable interactive component that supports various styles and sizes. It includes support for different visual states and customization options.

Usage

<Button 
  size="md"
  buttonStyle="filled"
  color="primary"
>
  Click me
</Button>

Button Styles

<>
  <Button buttonStyle="filled">Filled Button</Button>
  <Button buttonStyle="outlined">Outlined Button</Button>
  <Button buttonStyle="link">Link Button</Button>
  <Button buttonStyle="dim-filled-outlined">Dim Filled Outlined</Button>
  <Button buttonStyle="dim-outlined">Dim Outlined</Button>
</>

Button Sizes

<>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</>

Props

Button accepts all styled-system props from the following categories:

• Space Props
• Layout Props
• Color Props
• Typography Props
• Border Props

Additional Props

Prop	Type	Default	Description
color	string	'primary'	Theme color for the button
textColor	string	-	Text color override
disabled	boolean	false	Disables button interactions
size	'sm' \| 'md' \| 'lg'	'md'	Button size preset
buttonStyle	'filled' \| 'outlined' \| 'link' \| 'dim-filled-outlined' \| 'dim-outlined'	'filled'	Visual style variant