Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

FileButton

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

ソース@yamada-ui/file-button

Props

FileButtonProps

active

説明

If true, the button is represented as active.

タイプ

boolean

デフォルト

false

colorScheme

説明

The visual color appearance of the component.

タイプ

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

デフォルト

"gray"

disableRipple

説明

If true, disable ripple effects when pressing a element.

タイプ

boolean

デフォルト

false

endIcon

説明

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

タイプ

ReactElement<any, string | JSXElementConstructor<any>>

errorBorderColor

説明

The border color when the button is invalid.

タイプ

"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

説明

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

タイプ

boolean

デフォルト

false

invalid

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

isActive

非推奨

説明

If true, the button is represented as active.

非推奨

Use active instead.

タイプ

boolean

デフォルト

false

isDisabled

非推奨

説明

If true, the button is disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

isInvalid

非推奨

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

isLoading

非推奨

説明

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

非推奨

Use loading instead.

タイプ

boolean

デフォルト

false

isReadOnly

非推奨

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

isRequired

非推奨

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

isRounded

非推奨

説明

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

非推奨

Use fullRounded instead.

タイプ

boolean

デフォルト

false

leftIcon

非推奨

説明

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

非推奨

Use startIcon instead.

タイプ

ReactElement<any, string | JSXElementConstructor<any>>

loading

説明

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

タイプ

boolean

デフォルト

false

loadingIcon

説明

The icon to display when the button is loading.

タイプ

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

loadingPlacement

説明

The placement of the loading indicator. Accepts start or end.

タイプ

"end" | "start"

デフォルト

'start'

loadingText

説明

The text to display when the button is loading.

タイプ

string

onChange

説明

Function to be called when a file change event occurs.

タイプ

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

readOnly

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

required

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

resetRef

説明

Ref to a reset function.

タイプ

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

rightIcon

非推奨

説明

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

非推奨

Use endIcon instead.

タイプ

ReactElement<any, string | JSXElementConstructor<any>>

size

説明

The size of the FileButton.

タイプ

"xs" | "sm" | "md" | "lg" | "xl" | "2xl"

デフォルト

"md"

startIcon

説明

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

タイプ

ReactElement<any, string | JSXElementConstructor<any>>

variant

説明

The variant of the FileButton.

タイプ

"ghost" | "link" | "outline" | "solid" | "subtle" | "surface" | "unstyled"

デフォルト

"solid"

GitHubでこのページを編集する

前FileInput次Dropzone