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.

    SourceTheme source@chakra-ui/button

Props#

Button Props#

Button composes the Box component, so you can pass all its props. These are props specific to the Button component:

colorScheme

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
"gray"

iconSpacing

Description

The space between the button icon and label.

Type
SystemProps["marginRight"]

isActive

Description

If true, the button will be styled in its active state.

Type
boolean

isDisabled

Description

If true, the button will be disabled.

Type
boolean

isLoading

Description

If true, the button will show a spinner.

Type
boolean

leftIcon

Description

If added, the button will show an icon before the button's label.

Type
React.ReactElement

loadingText

Description

The label to show in the button when isLoading is true If no text is passed, it only shows the spinner

Type
string

rightIcon

Description

If added, the button will show an icon after the button's label.

Type
React.ReactElement

size

Type
"lg" | "md" | "sm" | "xs"
Default
"md"

spinner

Description

Replace the spinner component when isLoading is set to true

Type
React.ReactElement

spinnerPlacement

Description

It determines the placement of the spinner when isLoading is true

Type
"end" | "start"
Default
"start"

variant

Type
"ghost" | "outline" | "solid" | "link" | "unstyled"
Default
"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

Description

Color Schemes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.

Type
(string & {})

isAttached

Description

If true, the borderRadius of button that are direct children will be altered to look flushed together

Type
boolean

isDisabled

Description

If true, all wrapped button will be disabled

Type
boolean

size

Description

Sizes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.

Type
string

spacing

Description

The spacing between the buttons

Type
SystemProps["marginRight"]
Default
'0.5rem'

variant

Description

Variants for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel