Button

Triggers a click action usually performed by the user to trigger an event such as submitting a form or closing a dialog.

Button Props

Prop	Type	Default
`variant`	`"solid" \| "outline" \| "ghost" \| "text"`	`"solid"`
`color`	`"accent" \| "danger" \| "neutral" \| "success"`	`"accent"`
`size`	`"small" \| "normal"`	`"normal"`
`disabled`	`boolean`	`false`
`loading`	`boolean`	-
`loaderText`	`ReactNode`	-
`leadingIcon`	`ReactNode`	-
`trailingIcon`	`ReactNode`	-
`maxWidth`	`string \| number`	-
`width`	`string \| number`	-
`asChild`	`boolean`	-
`className`	`string`	-

Examples

Variant

Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is solid.

<Flex gap="large">
  <Button variant="solid">Solid</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="text">Text</Button>
</Flex>

Color

Colors help convey the purpose and importance of actions. The color prop only affects solid and outline variants. Default is accent.

<Flex gap="large">
  <Button color="success">Accent</Button>
  <Button color="danger">Danger</Button>
  <Button color="neutral">Neutral</Button>
  <Button color="success">Success</Button>
</Flex>

Size

The Button component offers two size options. Default size is normal.

<Flex gap="large" align="center">
  <Button size="small">Small</Button>
  <Button size="normal">Normal</Button>
</Flex>

Disabled

The Button component provides a "disabled" state, which prevents the button from responding to any user actions. Default is false.

<Flex gap="large">
  <Button variant="solid" disabled>
    Solid
  </Button>
  <Button variant="outline" disabled>
    Outline
  </Button>
  <Button variant="ghost" disabled>
    Ghost
  </Button>
  <Button variant="text" disabled>
    Text
  </Button>
</Flex>

Loading

The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button.

<Flex gap="large">
  <Button variant="solid" loading>
    Button
  </Button>
  <Button variant="solid" loading loaderText="Loading...">
    Button
  </Button>
  <Button variant="outline" loading loaderText="Loading...">
    Button
  </Button>
</Flex>

With leading and trailing icons

The button component accepts optional leading and/or trailing icons.

<Flex gap="large">
  <Button variant="solid" color="accent" leadingIcon={<>I</>}>
    With leading icon
  </Button>
  <Button variant="solid" color="accent" trailingIcon={<>O</>}>
    With trailing icon
  </Button>
  <Button
    variant="solid"
    color="accent"
    leadingIcon={<>I</>}
    trailingIcon={<>O</>}
  >
    With both icons
  </Button>
</Flex>

Button

On this page