Package Exports

@chakra-ui/button
@chakra-ui/button/dist/chakra-ui-button.cjs.js
@chakra-ui/button/dist/chakra-ui-button.esm.js

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>