Skip to main content

Button

Button is an interactive component that triggers actions. It comes with various styles and sizes to suit different needs.

Usage​

<Button 
  variant="filled"
  size="md"
  action={async () => console.log('clicked')}
>
  Click Me
</Button>

Variants​

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

Props​

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

  • Space Props
    • margin, padding and their variants
  • Typography Props
    • fontSize, fontWeight, lineHeight, etc.
  • Color Props
    • color, backgroundColor
  • Border Props
    • border, borderRadius, etc.
  • Layout Props
    • width, height, display, etc.

Specific Props​

variant​

Type: 'filled' | 'outlined' | 'dim-outlined' | 'dim-filled-outlined' | 'link' Default: 'filled'

Defines the visual style of the button.

size​

Type: 'sm' | 'md' | 'lg' | 'xl' | '2xl' Default: 'md'

Controls the button's size.

disabled​

Type: boolean Default: false

When true, the button becomes non-interactive.

color​

Type: string

Sets the button's background color (for filled variants) or border color (for outlined variants).

textColor​

Type: string

Sets the color of the button's text.

action​

Type: Action

Async function to execute when the button is pressed.