Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

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

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

Default

gray

disableRipple

Description

If true, disable ripple effects when pressing a element.

Type

boolean

Default

false

errorBorderColor

Description

The border color when the button is invalid.

Type

"border" | "link" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | BorderColor | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | ... 317 more ... | ColorModeArray<...>

isActive

Description

If true, the button is represented as active.

Type

boolean

Default

false

isDisabled

Description

If true, the button is disabled. If true, the form control will be 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

Description

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

Type

ReactElement<any, string | JSXElementConstructor<any>>

loadingIcon

Description

The icon to display when the button is loading.

Type

type ONLY_FOR_FORMAT = | ReactElement<any, string | JSXElementConstructor<any>> | (UIValue<string> & ("grid" | "audio" | "oval" | "dots" | "puff" | "rings" | "circles"))

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

Description

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

Type

ReactElement<any, string | JSXElementConstructor<any>>

size

Description

The size of the FileButton.

Type

"xs" | "sm" | "md" | "lg"

Default

md

variant

Description

The variant of the FileButton.

Type

"solid" | "outline" | "link" | "ghost" | "unstyled"

Default

solid

Edit this page on GitHub

PreviousFileInputNextDropzone