Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

FileButton

FileButton is a button component used for users to select files.

Source@yamada-ui/file-button

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

boolean

Default

false

endIcon

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 ... | [...]

isActive

Description

If true, the button is represented as active.

Type

boolean

Default

false

isDisabled

Description

If true, the button is disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isLoading

Description

If true, the loading state of the button is represented.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

isRounded

Description

If true, the button is full rounded. Else, it'll be slightly round.

Type

boolean

Default

false

leftIcon

Deprecated

Description

The icon to display at the left side of the button.

Deprecated

Use startIcon instead.

Type

ReactElement<any, string | JSXElementConstructor<any>>

loadingIcon

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

string

onChange

Description

Function to be called when a file change event occurs.

Type

(files: File[] | undefined) => void

resetRef

Description

Ref to a reset function.

Type

type ONLY_FOR_FORMAT = | ((instance: (() => void) | null) => void) | MutableRefObject<(() => void) | null>

rightIcon

Deprecated

Description

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

PreviousFileInputNextDropzone