@chakra-ui/button
v2.1.0
Published
A React component that is a base button.
Downloads
2,461,007
Readme
Button
Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.
Installation
yarn add @chakra-ui/button
# or
npm i @chakra-ui/button
Import component
import { Button } from "@chakra-ui/button"
Usage
<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
.
<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
.
<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.
<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.
<Stack>
<Button isLoading colorScheme="teal" variant="solid">
Email
</Button>
<Button
isLoading
colorScheme="teal"
variant="outline"
spinner={<BarSpinner />}
>
Submit
</Button>
</Stack>