active
Description
If true, the button is represented as active.
Type
booleanDefault
falseButton
Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
Props
ButtonProps
colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"gray"disableRipple
Description
If true, disable ripple effects when pressing a element.
Type
booleanDefault
falseendIcon
Description
The icon to display at the end side of the button.
Type
ReactElement<any, string | JSXElementConstructor<any>>fullRounded
Description
If true, the button is full rounded. Else, it'll be slightly round.
Type
booleanDefault
falseisActive
DeprecatedDescription
If true, the button is represented as active.
Deprecated
Use active instead.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the button is disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisLoading
DeprecatedDescription
If true, the loading state of the button is represented.
Deprecated
Use loading instead.
Type
booleanDefault
falseisRounded
DeprecatedDescription
If true, the button is full rounded. Else, it'll be slightly round.
Deprecated
Use fullRounded instead.
Type
booleanDefault
falseleftIcon
DeprecatedDescription
The icon to display at the left side of the button.
Deprecated
Use startIcon instead.
Type
ReactElement<any, string | JSXElementConstructor<any>>loading
Description
If true, the loading state of the button is represented.
Type
booleanDefault
falseloadingIcon
Description
The icon to display when the button is loading.
Type
type ONLY_FOR_FORMAT =
| "grid"
| ReactElement<any, string | JSXElementConstructor<any>>
| "audio"
| "circles"
| "dots"
| "oval"
| "puff"
| "rings"loadingPlacement
Description
The placement of the loading indicator. Accepts start or end.
Type
"end" | "start"Default
'start'loadingText
Description
The text to display when the button is loading.
Type
stringrightIcon
DeprecatedDescription
The icon to display at the right side of the button.
Deprecated
Use endIcon instead.
Type
ReactElement<any, string | JSXElementConstructor<any>>size
Description
The size of the Button.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl"Default
"md"startIcon
Description
The icon to display at the start side of the button.
Type
ReactElement<any, string | JSXElementConstructor<any>>variant
Description
The variant of the Button.
Type
"ghost" | "link" | "outline" | "solid" | "subtle" | "surface" | "unstyled"Default
"solid"ButtonGroupProps
attached
Description
If true, the borderRadius of button that are direct children will be altered to look flushed together.
Type
booleanDefault
falsedirection
DeprecatedDescription
The CSS flex-direction property.
Deprecated
Use flexDirection instead.
Type
UIValue<FlexDirection>disabled
Description
If true, all wrapped button will be disabled.
Type
booleanDefault
falseisAttached
DeprecatedDescription
If true, the borderRadius of button that are direct children will be altered to look flushed together.
Deprecated
Use attached instead.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, all wrapped button will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseEdit this page on GitHub