Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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>