chakra-xui
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-xui/button
# or
npm i @chakra-xui/buttonImport component
import { Button } from "@chakra-xui/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>