Leave Yamada UI a star
StarButton is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
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"Description
If true, disable ripple effects when pressing a element.
Type
booleanDefault
falseDescription
The icon to display at the end side of the button.
Type
ReactElement<any, string | JSXElementConstructor<any>>Description
If true, the button is represented as active.
Type
booleanDefault
falseDescription
If true, the button is disabled.
Type
booleanDefault
falseDescription
If true, the loading state of the button is represented.
Type
booleanDefault
falseDescription
If true, the button is full rounded. Else, it'll be slightly round.
Type
booleanDefault
falseDescription
The icon to display at the left side of the button.
Deprecated
Use startIcon instead.
Type
ReactElement<any, string | JSXElementConstructor<any>>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"Description
The placement of the loading indicator. Accepts start or end.
Type
"end" | "start"Default
'start'Description
The text to display when the button is loading.
Type
stringDescription
The icon to display at the right side of the button.
Deprecated
Use endIcon instead.
Type
ReactElement<any, string | JSXElementConstructor<any>>Description
The size of the Button.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl"Default
"md"Description
The icon to display at the start side of the button.
Type
ReactElement<any, string | JSXElementConstructor<any>>Description
The variant of the Button.
Type
"ghost" | "link" | "outline" | "solid" | "subtle" | "surface" | "unstyled"Default
"solid"Description
The CSS flex-direction property.
Type
"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | [FlexDirection | { [x: string]: FlexDirection | undefined; ... 5 more ...; xl?: FlexDirection | undefined; }, FlexDirection | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledT...Description
If true, the borderRadius of button that are direct children will be altered to look flushed together.
Type
booleanDefault
falseDescription
If true, all wrapped button will be disabled.
Type
booleanDefault
falseEdit this page on GitHub