Flip

Flip is a component that provides an animation to switch between two elements while flipping.

<Flip
  aria-label="Toggle icon"
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

Usage

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

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

import { Flip } from "@workspaces/ui"

<Flip />

Change Direction

To change the direction, set orientation to "horizontal" or "vertical". By default, "horizontal" is set.

<Flip
  aria-label="Toggle icon"
  orientation="vertical"
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

Change the Duration

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

<Flip
  aria-label="Toggle icon"
  duration={1.4}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

Delay

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

<Flip
  aria-label="Toggle icon"
  delay={1}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

Disable

To disable, set disabled to true.

<Flip
  aria-label="Toggle icon"
  disabled
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

Read-Only

To ready-Only, set readOnly to true.

<Flip
  aria-label="Toggle icon"
  readOnly
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

Control

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

return (
  <Flip
    aria-label="Toggle icon"
    from={<AppleIcon fontSize="2xl" />}
    to={<CherryIcon 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.4`	`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.
`orientation`	`"horizontal"`	`Orientation` The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.
`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 Flip follows the WAI-ARIA - Button Pattern for accessibility.

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

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

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

Similar Components

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

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Ripple is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.

Rotate is a component that provides an animation to switch between two elements while rotating.

Collapse is a component that allows you to expand or collapse an element for display.

Fade is a component that gradually shows or hides an element.

FadeScale is a component that gradually scales up to reveal or scales down to hide an element.

Skeleton is a component that acts as a placeholder until content is loaded.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.