---
title: Flip
description: "`Flip` is a component that provides an animation to switch between two elements while flipping."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flip/flip.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flip
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-flip--basic
---

# Flip

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

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

## Usage

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

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

```tsx
import { Flip } from "@workspaces/ui"
```

```tsx
<Flip />
```

### Change Direction

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

```tsx
<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`.

```tsx
<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`.

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

### Disable

To disable, set `disabled` to `true`.

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

### Read-Only

To ready-Only, set `readOnly` to `true`.

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

### Control

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

return (
  <Flip
    aria-label="Toggle icon"
    from={<AppleIcon fontSize="2xl" />}
    to={<CherryIcon fontSize="2xl" />}
    value={value}
    onChange={onChange}
  />
)
```

## 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](https://www.w3.org/WAI/ARIA/apg/patterns/button/) for accessibility.

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

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

### Keyboard Navigation

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

## Similar Components

- [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements.
- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.
- [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
- [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating.
- [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display.
- [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element.
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded.

## Uses Components & Hooks

- [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects.
- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.