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

Description

The visual color appearance of the component

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
ResponsiveValue<string | number | (string & {})>

isActive

Description

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

Type
boolean
Default
false

isDisabled

Description

If true, the button will be disabled.

Type
boolean
Default
false

isLoading

Description

If true, the button will show a spinner.

Type
boolean
Default
false

leftIcon

Description

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

Type
ReactElement<any, string | JSXElementConstructor<any>>

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
ReactElement<any, string | JSXElementConstructor<any>>

size

Description

The size of the Button

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

spinner

Description

Replace the spinner component when isLoading is set to true

Type
ReactElement<any, string | JSXElementConstructor<any>>

spinnerPlacement

Description

It determines the placement of the spinner when isLoading is true

Type
"start" | "end"
Default
start

variant

Description

The variant of the Button

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:

isAttached

Description

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

Type
boolean
Default
false

isDisabled

Description

If true, all wrapped button will be disabled

Type
boolean
Default
false

spacing

Description

The spacing between the buttons

Type
ResponsiveValue<string | number | (string & {})>
Default
'0.5rem'
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel