@illa-design/button v1.3.0

Button

The Button component is used to trigger an action or event, such as submitting a form, delete a data, and so on.

Installation

yarn add @illa-design/button

Import component

import { Button } from "@illa-design/button"

API

Button Basic Properties

Button Events

ButtonGroup can combine multiple buttons and setting the basic properties of multiple buttons

ButtonGroup Basic Props

Example

Basic usage

<Button>Hello</Button>

Set Button's size

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

Set Button's variant and background color

<Button>Hello</Button>
<Button variant="outline" colorScheme="cyan">Hello</Button>

Set Button's icons

<Button>Hello</Button>
<Button variant="fill" colorScheme="red" leftIcon={<BsArrowLeft />} rightIcon={<BsArrowRight />}>Hello</Button>

Set Button's disabled status or loading status

<Button>Hello</Button>
<Button disabled>Hello</Button>
<Button loading loadingText="Loading">Hello</Button>

Set ButtonGroup's variant and spacing

<ButtonGroup variant="outline" spacing="5px">
  <Button>Hello</Button>
  <Button disabled>Hello</Button>
  <Button loading loadingText="Loading">Hello</Button>
</ButtonGroup>
<ButtonGroup variant="outline" attached>
  <Button leftIcon={<BsArrowLeft />} />
  <Button>Hello</Button>
  <Button rightIcon={<BsArrowRight />} />
</ButtonGroup>