Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

FileButton

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

Source@yamada-ui/file-button

Props

FileButtonProps

active

Description

If true, the button is represented as active.

Type

boolean

Default

false

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

fullRounded

Description

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

Type

boolean

Default

false

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isActive

Deprecated

Description

If true, the button is represented as active.

Deprecated

Use active instead.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the button is disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isLoading

Deprecated

Description

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

Deprecated

Use loading instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

isRounded

Deprecated

Description

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

Deprecated

Use fullRounded instead.

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>>

loading

Description

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

Type

boolean

Default

false

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

readOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

required

Description

If true, the form control will be required.

Type

boolean

Default

false

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