94 lines
1.7 KiB
Markdown
94 lines
1.7 KiB
Markdown
|
# Button
|
||
|
|
|
||
|
|
Buttons are used as triggers for actions. They are used in forms, toolbars,
|
||
|
|
dialog footers and as stand-alone action triggers.
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn add @chakra-ui/button
|
||
|
|
|
||
|
|
# or
|
||
|
|
|
||
|
|
npm i @chakra-ui/button
|
||
|
|
```
|
||
|
|
|
||
|
|
## Import component
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { Button } from "@chakra-ui/button"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Button colorScheme="green">Button</Button>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Button Sizes
|
||
|
|
|
||
|
|
Use the `size` prop to change the size of the button. You can set the value to
|
||
|
|
`xs`, `sm`, `md`, or `lg`.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Stack>
|
||
|
|
<Button size="xs">Button</Button>
|
||
|
|
<Button size="sm">Button</Button>
|
||
|
|
<Button size="md">Button</Button>
|
||
|
|
<Button size="lg">Button</Button>
|
||
|
|
</Stack>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Button Variant
|
||
|
|
|
||
|
|
Use the `variant` prop to change the visual style of the Button. You can set the
|
||
|
|
value to `solid`, `ghost`, `outline`, or `link`.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<ButtonGroup>
|
||
|
|
<Button variant="solid">Button</Button>
|
||
|
|
<Button variant="outline">Button</Button>
|
||
|
|
<Button variant="ghost">Button</Button>
|
||
|
|
<Button variant="link">Button</Button>
|
||
|
|
</ButtonGroup>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Button with Icon
|
||
|
|
|
||
|
|
You can add left and right icons to the Button components.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<ButtonGroup>
|
||
|
|
<Button leftIcon={<EmailIcon />} variant="solid">
|
||
|
|
Email
|
||
|
|
</Button>
|
||
|
|
<Button rightIcon={<ArrowForwardIcon />} variant="outline">
|
||
|
|
Call us
|
||
|
|
</Button>
|
||
|
|
</ButtonGroup>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Button loading state
|
||
|
|
|
||
|
|
Pass `isLoading` prop to the Button component to show its loading state. You can
|
||
|
|
optionally pass `loadingText` prop.
|
||
|
|
|
||
|
|
You can also use a custom spinner to render your own spinner component.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Stack>
|
||
|
|
<Button isLoading colorScheme="teal" variant="solid">
|
||
|
|
Email
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
isLoading
|
||
|
|
colorScheme="teal"
|
||
|
|
variant="outline"
|
||
|
|
spinner={<BarSpinner />}
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
```
|