Swap

A utility component used to toggle between two elements with an animation.

Usage

A flexible utility for switching between two different states or indicators, such as a play/pause button, sun/moon for theme toggling, or a checkmark/copy icon.

import { Swap, Icon, Button } from "@elemnts-ui/react"
import { useState } from "react"

export const Demo = () => {
  const [swapped, setSwapped] = useState(false)

  return (
    <Button iconOnly onClick={() => setSwapped(!swapped)}>
      <Swap swap={swapped}>
        <Swap.Indicator type="on">
          <Icon icon="tabler:sun" />
        </Swap.Indicator>
      </Swap>
    </Button>
  )
}

Examples

Fade

Toggles between indicators with a smooth opacity transition.

Rotate

Swaps indicators by rotating them, ideal for icons like sun/moon or sync.

Scale

Transitions between states by scaling the indicators up or down.

Flip

Provides a card-flipping effect to reveal the alternate indicator.

API Reference

SwapRoot

The root container for the swap component.

Prop	Type	Default
mode	`'flip' \| 'scale' \| 'rotate' \| 'fade'`	-
swap	`boolean`	`false`

SwapIndicator

Represents one of the two states (on or off).

Prop	Type	Default
type	`'on' \| 'off'`	-
asChild	`boolean`	`false`