Airy

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

<Airy
  aria-label="Toggle navigation"
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

Usage

import { Airy } from "@yamada-ui/react"

import { Airy } from "@/components/ui"

import { Airy } from "@workspaces/ui"

<Airy />

Change the Duration

To change the duration, set a numerical value (seconds) to duration.

<Airy
  aria-label="Toggle navigation"
  duration={0.6}
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

Delay

If you want to delay the switch, set a numerical value (seconds) to delay.

<Airy
  aria-label="Toggle navigation"
  delay={1}
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

Disable

To disable, set disabled to true.

<Airy
  aria-label="Toggle navigation"
  disabled
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

Read-Only

To ready-Only, set readOnly to true.

<Airy
  aria-label="Toggle navigation"
  readOnly
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

Control

const [value, onChange] = useState<KeyframeIdent>("to")

return (
  <Airy
    aria-label="Toggle navigation"
    from={<MenuIcon fontSize="2xl" />}
    to={<XIcon fontSize="2xl" />}
    value={value}
    onChange={onChange}
  />
)

If you use this code, you need to add "use client" to the top of the file.

Props

Prop	Default	Type / Description
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`defaultValue`	`"from"`	`KeyframeIdent` You can set the initial state.
`delay`	`0`	`number` 　The animation delay.
`disabled`	`false`	`boolean` If `true`, the component is disabled.
`duration`	`0.2`	`number` The animation duration.
`from`	-	`ReactNode` Passing React elements to "from" is required.
`onChange`	-	`(value: KeyframeIdent) => void` This is a callback function that is called when the animation state changes.
`readOnly`	`false`	`boolean` If `true`, the component is readonly.
`to`	-	`ReactNode` Passing React elements to "to" is required.
`value`	-	`KeyframeIdent` Use this when you want to control the animation from outside the component.

Accessibility

The Airy follows the WAI-ARIA - Button Pattern for accessibility.

When aria-label is set, it will be read aloud by screen readers.

<Airy
  aria-label="Menu"
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

Key	Description	State
`Enter`, `Space`	When element has focus, activates it.	-