@chakra-ui/button

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>

Similar packages

Other packages similar to @chakra-ui/button

react-bootstrap

React-Bootstrap provides a set of React components that implement the Bootstrap framework. It offers a wide range of pre-styled components, including buttons, which can be customized using Bootstrap's utility classes. Compared to @chakra-ui/button, React-Bootstrap buttons are more tightly coupled with the Bootstrap design system.

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It provides a comprehensive set of components, including buttons, that are highly customizable and come with built-in accessibility. Material-UI buttons offer a different design aesthetic compared to @chakra-ui/button, focusing on Material Design principles.

antd

Ant Design (antd) is a React UI library that provides a set of high-quality components, including buttons, following the Ant Design guidelines. It is widely used in enterprise applications and offers a rich set of features and customization options. Ant Design buttons have a distinct look and feel compared to @chakra-ui/button.