Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add swap

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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>
<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-slot:on>
        <span class="text-2xl">🌞</span>
    </x-slot:on>
    <x-slot:off>
        <span class="text-2xl">🌙</span>
    </x-slot:off>
</x-aura::swap>
<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>
<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-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>
<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.