"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"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.
Props#
Button Props#
Button composes the Box component, so you can pass all its props. These are
props specific to the Button component:
colorScheme
colorSchemeType
Default
"gray"iconSpacing
iconSpacingDescription
The space between the button icon and label.
Type
SystemProps["marginRight"]isActive
isActiveDescription
If true, the button will be styled in its active state.
Type
booleanisDisabled
isDisabledDescription
If true, the button will be disabled.
Type
booleanisLoading
isLoadingDescription
If true, the button will show a spinner.
Type
booleanleftIcon
leftIconDescription
If added, the button will show an icon before the button's label.
Type
React.ReactElementloadingText
loadingTextDescription
The label to show in the button when isLoading is true
If no text is passed, it only shows the spinner
Type
stringrightIcon
rightIconDescription
If added, the button will show an icon after the button's label.
Type
React.ReactElementsize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"spinner
spinnerDescription
Replace the spinner component when isLoading is set to true
Type
React.ReactElementspinnerPlacement
spinnerPlacementDescription
It determines the placement of the spinner when isLoading is true
Type
"end" | "start"Default
"start"variant
variantType
"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
colorSchemeDescription
Color Schemes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringisAttached
isAttachedDescription
If true, the borderRadius of button that are direct children will be altered
to look flushed together
Type
booleanisDisabled
isDisabledDescription
If true, all wrapped button will be disabled
Type
booleansize
sizeDescription
Sizes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringspacing
spacingDescription
The spacing between the buttons
Type
SystemProps["marginRight"]Default
'0.5rem'variant
variantDescription
Variants for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringProps#
Button Props#
Button composes the Box component, so you can pass all its props. These are
props specific to the Button component:
colorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"gray"iconSpacing
iconSpacingDescription
The space between the button icon and label.
Type
SystemProps["marginRight"]isActive
isActiveDescription
If true, the button will be styled in its active state.
Type
booleanisDisabled
isDisabledDescription
If true, the button will be disabled.
Type
booleanisLoading
isLoadingDescription
If true, the button will show a spinner.
Type
booleanleftIcon
leftIconDescription
If added, the button will show an icon before the button's label.
Type
React.ReactElementloadingText
loadingTextDescription
The label to show in the button when isLoading is true
If no text is passed, it only shows the spinner
Type
stringrightIcon
rightIconDescription
If added, the button will show an icon after the button's label.
Type
React.ReactElementsize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"spinner
spinnerDescription
Replace the spinner component when isLoading is set to true
Type
React.ReactElementspinnerPlacement
spinnerPlacementDescription
It determines the placement of the spinner when isLoading is true
Type
"end" | "start"Default
"start"variant
variantType
"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
colorSchemeDescription
Color Schemes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringisAttached
isAttachedDescription
If true, the borderRadius of button that are direct children will be altered
to look flushed together
Type
booleanisDisabled
isDisabledDescription
If true, all wrapped button will be disabled
Type
booleansize
sizeDescription
Sizes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringspacing
spacingDescription
The spacing between the buttons
Type
SystemProps["marginRight"]Default
'0.5rem'variant
variantDescription
Variants for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
string