Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

Button

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Source@yamada-ui/button

Props

ButtonProps

colorScheme

Description

The visual color appearance of the component.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "rose" | "pink" | "flashy" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia"

Default

gray

disableRipple

Description

If true, disable ripple effects when pressing a element.

Type

boolean

Default

false

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

isLoading

Description

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

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 = | "audio" | "grid" | ReactElement<any, string | JSXElementConstructor<any>> | "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

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

Type

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

Default

md

variant

Description

The variant of the Button.

Type

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

Default

solid

ButtonGroupProps

direction

Description

The CSS flex-direction property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | Partial<Record<"base" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl", FlexDirection>> | ColorModeArray<...> | Partial<...> | ColorModeArray<...> | ((theme: StyledTheme) => UIValue...

isAttached

Description

If true, the borderRadius of button that are direct children will be altered to look flushed together.

Type

boolean

Default

false

isDisabled

Description

If true, all wrapped button will be disabled.

Type

boolean

Default

false

Edit this page on GitHub

PreviousFieldsetNextIconButton