@chakra-ui/button

What is @chakra-ui/button?

@chakra-ui/button is a component from the Chakra UI library that provides a set of accessible, customizable, and composable button components for React applications. It allows developers to create buttons with various styles, sizes, and behaviors easily.

What are @chakra-ui/button's main functionalities?

Basic Button

This code demonstrates how to create a basic button with a blue color scheme using the @chakra-ui/button package.

import { Button } from '@chakra-ui/react';

function App() {
  return <Button colorScheme='blue'>Button</Button>;
}

Button Sizes

This code demonstrates how to create buttons of different sizes (small, medium, and large) using the @chakra-ui/button package.

import { Button } from '@chakra-ui/react';

function App() {
  return (
    <>
      <Button size='sm'>Small</Button>
      <Button size='md'>Medium</Button>
      <Button size='lg'>Large</Button>
    </>
  );
}

Button Variants

This code demonstrates how to create buttons with different variants (solid, outline, and ghost) using the @chakra-ui/button package.

import { Button } from '@chakra-ui/react';

function App() {
  return (
    <>
      <Button variant='solid'>Solid</Button>
      <Button variant='outline'>Outline</Button>
      <Button variant='ghost'>Ghost</Button>
    </>
  );
}

Button with Icon

This code demonstrates how to create a button with an icon using the @chakra-ui/button package.

import { Button } from '@chakra-ui/react';
import { FaArrowRight } from 'react-icons/fa';

function App() {
  return <Button rightIcon={<FaArrowRight />} colorScheme='teal'>Button with Icon</Button>;
}

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.

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>