Button

Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

Import#

import { Button } from "@chakra-ui/core";

import { Button } from "@chakra-ui/core";

Usage#

<Button variantColor="green">Button</Button>

<Button variantColor="green">Button</Button>

Editable Example

Button Sizes#

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

<ButtonGroup spacing={4}>
  <Button variantColor="teal" size="xs">
    Button
  </Button>
  <Button variantColor="teal" size="sm">
    Button
  </Button>
  <Button variantColor="teal" size="md">
    Button
  </Button>
  <Button variantColor="teal" size="lg">
    Button
  </Button>
</ButtonGroup>

<ButtonGroup spacing={4}>
  <Button variantColor="teal" size="xs">
    Button
  </Button>
  <Button variantColor="teal" size="sm">
    Button
  </Button>
  <Button variantColor="teal" size="md">
    Button
  </Button>
  <Button variantColor="teal" size="lg">
    Button
  </Button>
</ButtonGroup>

Editable Example

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 spacing={4}>
  <Button variantColor="teal" variant="solid">
    Button
  </Button>
  <Button variantColor="teal" variant="outline">
    Button
  </Button>
  <Button variantColor="teal" variant="ghost">
    Button
  </Button>
  <Button variantColor="teal" variant="link">
    Button
  </Button>
</ButtonGroup>

<ButtonGroup spacing={4}>
  <Button variantColor="teal" variant="solid">
    Button
  </Button>
  <Button variantColor="teal" variant="outline">
    Button
  </Button>
  <Button variantColor="teal" variant="ghost">
    Button
  </Button>
  <Button variantColor="teal" variant="link">
    Button
  </Button>
</ButtonGroup>

Editable Example

Button with Icon#

You can add left and right icons to the Button components. See how to add icons to your project

<ButtonGroup spacing={4}>
  <Button leftIcon="email" variantColor="teal" variant="solid">
    Email
  </Button>
  <Button rightIcon="arrow-forward" variantColor="teal" variant="outline">
    Call us
  </Button>
</ButtonGroup>

<ButtonGroup spacing={4}>
  <Button leftIcon="email" variantColor="teal" variant="solid">
    Email
  </Button>
  <Button rightIcon="arrow-forward" variantColor="teal" variant="outline">
    Call us
  </Button>
</ButtonGroup>

Editable Example

You can also use icons from popular libraries like react-icons and just pass it into the button.

// -> import {MdBuild , MdCall} from "react-icons/md"
<ButtonGroup spacing={4}>
  <Button leftIcon={MdBuild} variantColor="pink" variant="solid">
    Settings
  </Button>
  <Button rightIcon={MdCall} variantColor="blue" variant="outline">
    Call us
  </Button>
</ButtonGroup>

// -> import {MdBuild , MdCall} from "react-icons/md"
<ButtonGroup spacing={4}>
  <Button leftIcon={MdBuild} variantColor="pink" variant="solid">
    Settings
  </Button>
  <Button rightIcon={MdCall} variantColor="blue" variant="outline">
    Call us
  </Button>
</ButtonGroup>

Editable Example

Button loading state#

Pass isLoading prop to the Button component to show it's loading state. You can optionally pass loadingText prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner

<ButtonGroup spacing={4}>
  <Button isLoading variantColor="teal" variant="solid">
    Email
  </Button>
  <Button
    isLoading
    loadingText="Submitting"
    variantColor="teal"
    variant="outline"
  >
    Submit
  </Button>
</ButtonGroup>

<ButtonGroup spacing={4}>
  <Button isLoading variantColor="teal" variant="solid">
    Email
  </Button>
  <Button
    isLoading
    loadingText="Submitting"
    variantColor="teal"
    variant="outline"
  >
    Submit
  </Button>
</ButtonGroup>

Editable Example

Accessibility#

Button has role button.
When Button has focus, Space and Enter activates it.

Composition#

Button composes PseudoBox and all props you pass (variant, variantColor, etc.) are converted to style props. This means you can override any style of the Button via props.

// The size prop affects the height of the button
// but I can still override it by passing a custom height
<Button
  size="md"
  height="48px"
  width="200px"
  border="2px"
  borderColor="green.500"
>
  Button
</Button>

// The size prop affects the height of the button
// but I can still override it by passing a custom height
<Button
  size="md"
  height="48px"
  width="200px"
  border="2px"
  borderColor="green.500"
>
  Button
</Button>

Editable Example

Custom Button#

In event you need to make your own custom button, you can leverage the PseudoBox component. It provides the hover, focus, active and disabled style props to style the button.

// Button from facebook.com
<PseudoBox
  as="button"
  height="24px"
  lineHeight="1.2"
  transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
  border="1px"
  px="8px"
  rounded="2px"
  fontSize="14px"
  fontWeight="semibold"
  bg="#f5f6f7"
  borderColor="#ccd0d5"
  color="#4b4f56"
  _hover={{ bg: "#ebedf0" }}
  _active={{
    bg: "#dddfe2",
    transform: "scale(0.98)",
    borderColor: "#bec3c9",
  }}
  _focus={{
    boxShadow:
      "0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)",
  }}
>
  Join Group
</PseudoBox>

// Button from facebook.com
<PseudoBox
  as="button"
  height="24px"
  lineHeight="1.2"
  transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
  border="1px"
  px="8px"
  rounded="2px"
  fontSize="14px"
  fontWeight="semibold"
  bg="#f5f6f7"
  borderColor="#ccd0d5"
  color="#4b4f56"
  _hover={{ bg: "#ebedf0" }}
  _active={{
    bg: "#dddfe2",
    transform: "scale(0.98)",
    borderColor: "#bec3c9",
  }}
  _focus={{
    boxShadow:
      "0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)",
  }}
>
  Join Group
</PseudoBox>

Editable Example

Props#

The Button composes the PseudoBox component so you can pass props for PseudoBox. These are props related to the Button component.

Name	Type	Default	Description
`aria-label`	`string`		The label of the button
`variantColor`	`string`		The color of the button. Use the colors passed in `theme.colors`.
`variant`	`outline`, `ghost`, `unstyled` , `link` , `solid`	`solid`	The variant of the button style to use.
`isDisabled`	`boolean`		If `true`, the button will be disabled.
`isLoading`	`boolean`		If `true`, the button will show a spinner.
`loadingText`	`string`		The label to show in the button when `isLoading` is true. If no text is passed, it only shows the spinner
`size`	`sm`, `md`, `lg`	`md`	The size of the button.

Proudly made in 🇳🇬

Released under the MIT License.

Button

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Button Sizes#

Button Variant#

Button with Icon#

Button loading state#

Accessibility#

Composition#

Custom Button#

Props#

Import#