Skip to content

Overview

The <x-aura::swap> component toggles between two content states using named on and off slots. It supports optional rotation and flip transition effects. Use it for theme toggles, icon switches, like/unlike buttons, or any two-state visual swap.

Basic Usage

<x-aura::swap>
    <x-slot:on>
        <x-aura::icon name="sun" class="w-6 h-6" />
    </x-slot:on>
    <x-slot:off>
        <x-aura::icon name="moon" class="w-6 h-6" />
    </x-slot:off>
</x-aura::swap>

Props

Prop Type Default Description
active bool false Initial toggle state. true shows the on slot, false shows the off slot.
rotate bool false Apply a rotation transition when toggling.
flip bool false Apply a flip transition when toggling.

Slots

Slot Description
on Content displayed when the swap is active (toggled on).
off Content displayed when the swap is inactive (toggled off).

Variants / Examples

Theme Toggle

🌞 🌙 
<x-aura::swap x-on:toggle="darkMode = !darkMode">
    <x-slot:on>
        <x-aura::icon name="sun" class="w-6 h-6" />
    </x-slot:on>
    <x-slot:off>
        <x-aura::icon name="moon" class="w-6 h-6" />
    </x-slot:off>
</x-aura::swap>

With Rotation Effect

<x-aura::swap :rotate="true">
    <x-slot:on>
        <x-aura::icon name="volume-2" class="w-6 h-6" />
    </x-slot:on>
    <x-slot:off>
        <x-aura::icon name="volume-x" class="w-6 h-6" />
    </x-slot:off>
</x-aura::swap>

With Flip Effect

<x-aura::swap :flip="true" x-on:toggle="liked = !liked">
    <x-slot:on>
        <x-aura::icon name="heart" class="w-6 h-6 text-red-500" />
    </x-slot:on>
    <x-slot:off>
        <x-aura::icon name="heart" class="w-6 h-6 text-aura-surface-400" />
    </x-slot:off>
</x-aura::swap>

Accessibility

  • The swap has role="switch" with aria-checked reflecting the current state.
  • Keyboard activation is supported via click events on the container.
  • Use an aria-label on the component to describe the toggle action for screen readers.