## Import
```js
import { Button, ButtonGroup } from '@chakra-ui/react'
```
- **Button:** The button component with support for custom icons, spinners, etc.
- **ButtonGroup:** Used to group buttons whose actions are related, with an
option to flush them together.
## Usage
```jsx
```
### Button Sizes
Use the `size` prop to change the size of the button. You can set the value to
`xs`, `sm`, `md`, or `lg`.
```jsx
```
### Button variants
Use the `variant` prop to change the visual style of the Button. You can set the
value to `solid`, `ghost`, `outline`, or `link`.
```jsx
```
### Button Colors
Use the colorScheme prop to change the color scheme of the Button. You can set
the value to any of the color scales from your design system, like `whiteAlpha`,
`blackAlpha`, `gray`, `red`, `blue`, or your custom color scale.
```jsx
```
### Button with icon
You can add left and right icons to the Button component using the `leftIcon`
and `rightIcon` props respectively.
> Note: The `leftIcon` and `rightIcon` prop values should be react elements NOT
> strings.
```jsx
} colorScheme='teal' variant='solid'>
Email
} colorScheme='teal' variant='outline'>
Call us
```
You can also use icons from popular libraries like
[react-icons](https://react-icons.github.io/react-icons/) and pass it into the
button.
```jsx
// import { MdBuild , MdCall } from "react-icons/md"
} colorScheme='pink' variant='solid'>
Settings
} colorScheme='blue' variant='outline'>
Call us
```
### Button loading state
Pass the `isLoading` prop to show its loading state. By default, the button will
show a spinner and leave the button's width unchanged.
You can also pass the `loadingText` prop to show a spinner and the loading text.
```jsx
```
You can change the spinner element to use custom loaders as per your design
requirements. Pass the `spinner` prop and set it to a custom react element.
```jsx
}
>
Click me
```
When a `loadingText` is present, you can change the placement of the spinner
element to either `start` or `end`. It is `start` by default.
```jsx
```
### Social Buttons
We've included the colors for common social media platforms, and you can simply
use their buttons via the `colorScheme` prop.
```jsx
}>
Facebook
}>
Twitter
```
The Facebook and Twitter icons in the above example are available from
[`react-icons`](https://react-icons.netlify.com/#/) as `FaFacebook` and
`FaTwitter`, found in the `react-icons/fa` import.
### Grouping Buttons
You can use the `Stack` or `ButtonGroup` component to group buttons. When you
use the `ButtonGroup` component, it allows you to:
- Set the `size` and `variant` of all buttons within it.
- Add `spacing` between the buttons.
- Flush the buttons together by removing the border radius of their children as
needed.
```jsx
```
To flush the buttons, pass the `isAttached` prop.
```jsx
} />
```
## Accessibility
- Button has `role` of `button`.
- When Button has focus, Space or Enter activates it.
## Composition
All props you pass (`variant`, `colorScheme`, etc.) are converted to style
props. This means you can override any style of the Button via props.
```jsx
// The size prop affects the height of the button
// It can still be overridden by passing a custom height
```
---
## Custom Button
In the event that you need to make your own custom button, you can leverage the
`Box` component. It provides the `hover`, `focus`, `active` and `disabled` style
props to style the button.
```jsx
// Button from facebook.com
Join Group
```