active
Description
If true, the button is represented as active.
Type
booleanDefault
falseFileButton
FileButton is a button component used for users to select files.
Props
FileButtonProps
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>>errorBorderColor
Description
The border color when the button is invalid.
Type
"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]fullRounded
Description
If true, the button is full rounded. Else, it'll be slightly round.
Type
booleanDefault
falseinvalid
Description
If true, the form control will be invalid.
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
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisLoading
DeprecatedDescription
If true, the loading state of the button is represented.
Deprecated
Use loading instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required 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
stringonChange
Description
Function to be called when a file change event occurs.
Type
(files: File[] | undefined) => voidreadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falserequired
Description
If true, the form control will be required.
Type
booleanDefault
falseresetRef
Description
Ref to a reset function.
Type
type ONLY_FOR_FORMAT =
| ((instance: (() => void) | null) => void)
| MutableRefObject<(() => void) | null>rightIcon
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 FileButton.
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 FileButton.
Type
"ghost" | "link" | "outline" | "solid" | "subtle" | "surface" | "unstyled"Default
"solid"Edit this page on GitHub