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, 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
Button Sizes
Use the size
prop to change the size of the button. You can set the value to
xs
, sm
, md
, or lg
.
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
.
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.
Button with icon
You can add left and right icons to the Button component using the leftIcon
and rightIcon
props respectively.
Note: The
leftIcon
andrightIcon
prop values should be react elements NOT strings.
You can also use icons from popular libraries like react-icons and pass it into the button.
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.
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.
When a loadingText
is present, you can change the placement of the spinner
element to either start
or end
. It is start
by default.
Social Buttons
We've included the colors for common social media platforms, and you can simply
use their buttons via the colorScheme
prop.
The Facebook and Twitter icons in the above example are available from
react-icons
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
andvariant
of all buttons within it. - Add
spacing
between the buttons. - Flush the buttons together by removing the border radius of their children as needed.
To flush the buttons, pass the isAttached
prop.
Accessibility
- Button has
role
ofbutton
. - 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.
// The size prop affects the height of the button
// It can still be overridden by passing a custom height
<Button
size='md'
height='48px'
width='200px'
border='2px'
borderColor='green.500'
>
Button
</Button>
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.
// Button from facebook.com
<Box
as='button'
height='24px'
lineHeight='1.2'
transition='all 0.2s cubic-bezier(.08,.52,.52,1)'
border='1px'
px='8px'
borderRadius='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
</Box>
Props
Button Props
Button
composes the Box
component, so you can pass all its props. These are
props specific to the Button
component:
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"gray"
iconSpacing
iconSpacing
The space between the button icon and label.
SystemProps["marginRight"]
isActive
isActive
If true
, the button will be styled in its active state.
boolean
isDisabled
isDisabled
If true
, the button will be disabled.
boolean
isLoading
isLoading
If true
, the button will show a spinner.
boolean
leftIcon
leftIcon
If added, the button will show an icon before the button's label.
React.ReactElement
loadingText
loadingText
The label to show in the button when isLoading
is true
If no text is passed, it only shows the spinner
string
rightIcon
rightIcon
If added, the button will show an icon after the button's label.
React.ReactElement
size
size
"lg" | "md" | "sm" | "xs"
"md"
spinner
spinner
Replace the spinner component when isLoading
is set to true
React.ReactElement
spinnerPlacement
spinnerPlacement
It determines the placement of the spinner when isLoading is true
"end" | "start"
"start"
variant
variant
"ghost" | "outline" | "solid" | "link" | "unstyled"
"solid"
Button Group Props
ButtonGroup
composes the Box
component, so you can pass all its props. These
are props specific to the ButtonGroup
component:
colorScheme
colorScheme
Color Schemes for ButtonGroup
are not implemented in the default theme. You can extend the theme to implement them.
string
isAttached
isAttached
If true
, the borderRadius of button that are direct children will be altered
to look flushed together
boolean
isDisabled
isDisabled
If true
, all wrapped button will be disabled
boolean
size
size
Sizes for ButtonGroup
are not implemented in the default theme. You can extend the theme to implement them.
string
spacing
spacing
The spacing between the buttons
SystemProps["marginRight"]
'0.5rem'
variant
variant
Variants for ButtonGroup
are not implemented in the default theme. You can extend the theme to implement them.
string