Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Airy

Airy is a component that provides a smooth animation to switch between two elements.

Source@yamada-ui/transitions

Props

AiryProps

from

Required

Description

Passing React elements to "from" is required.

Type

ReactElement<any, string | JSXElementConstructor<any>>

to

Required

Description

Passing React elements to "to" is required.

Type

ReactElement<any, string | JSXElementConstructor<any>>

as

Description

The HTML element to render.

Type

keyof ReactDOM

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"

defaultValue

Description

You can set the initial state.

Type

AiryIdent

Default

'from'

delay

Description

 The animation delay.

Type

number

Default

0

disabled

Description

If true, the component is disabled.

Type

boolean

Default

false

duration

Description

The animation duration.

Type

number

Default

0.2

isDisabled

Deprecated

Description

If true, the component is disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the component is readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

onChange

Description

This is a callback function that is called when the animation state changes.

Type

(value: AiryIdent) => void

readOnly

Description

If true, the component is readonly.

Type

boolean

Default

false

size

Description

The size of the Airy.

Type

string

value

Description

Use this when you want to control the animation from outside the component.

Type

AiryIdent

variant

Description

The variant of the Airy.

Type

string

Edit this page on GitHub

PreviousTransitionsNextCollapse