Swaps

API Docs

The Swap component allows you to quickly swap between two icons, images, or HTML elements with a simple click.

Simple Emojis

The simplest use of the Swap component is to toggle between two emojis. You can even add various animations!

Preview

💔

❤️

🌞

🌚

🔊

🔇

Code

.mt-4.flex.gap-x-6.text-4xl.lg:text-6xl
  = daisy_swap(off: "❤️", on: "💔")
  = daisy_swap(off: "🌚", on: "🌞", css: "swap-rotate")
  = daisy_swap(off: "🔇", on: "🔊", css: "swap-flip")

Hero Icons

You can also use the Swap component with Hero Icons. The following example toggles between various icons.

You can also use our special hero_icon helper which accepts the css property and all other options that our custom components accept.

Preview

Code

.mt-2.flex.items-center.gap-x-4
  - sizes = "size-16"
  = daisy_swap(checked: true) do |swap|
    - swap.with_on do
      = hero_icon "pause-circle", css: sizes, variant: :outline
    - swap.with_off do
      = heroicon_tag "play-circle", class: sizes, variant: :outline

  = daisy_swap(checked: true) do |swap|
    - swap.with_on do
      = heroicon_tag "bell-alert", class: sizes + " animate-bounce text-purple-600", variant: :outline
    - swap.with_off do
      = heroicon_tag "bell-slash", class: sizes + " text-gray-400", variant: :outline

  - # The standard tooltip hover doesn't work with the swap element well, so we
  - # force it open for this example.
  - #
  - # Also, the tooltip seems to change the spacing, so we add some top margin
  - # to keep the icon centered vertically.
  = daisy_swap(css: "text-blue-600 mt-1") do |swap|
    - swap.with_on do
      .tooltip.tooltip-right.tooltip-open{ data: { tip: "Dollar" }}
        = heroicon_tag "currency-dollar", class: sizes, variant: :outline
    - swap.with_off do
      .tooltip.tooltip-right.tooltip-open{ data: { tip: "Euro" }}
        = heroicon_tag "currency-euro", class: sizes, variant: :outline

Custom HTML Elements

You can also use the Swap component with custom HTML elements. The following example toggles between a stop sign, a go sign, and a slow sign (when you click the Make Indeterminate button).

Preview

Stop

Slow

Make Indeterminate

Code

- shared_classes = "p-8 mask text-center font-bold"
.w-56.mt-4.flex.flex-col.items-center
  = daisy_swap(css: "swap-rotate", checkbox_html: { id: "stopsign" }) do |swap|
    - swap.with_off do
      .mask-hexagon.bg-red-600.text-white{ class: shared_classes } Stop
    - swap.with_on do
      .mask-circle.bg-green-500.text-white{ class: shared_classes } Go
    - swap.with_indeterminate do
      .mask-squircle.bg-yellow-500.text-black{ class: shared_classes } Slow

  .mt-2.btn.btn-sm.px-4.py-2{ onclick: "document.getElementById('stopsign').indeterminate = true" }
    Make Indeterminate

Made with by Profoundry .