Components

Swap

Use Semji's swap component with Tailwind CSS to toggle element visibility for dynamic, interactive web UIs.

Variants

Swap text

Utilize the `swap` component class along with an empty checkbox input and child component classes `swap-off` and `swap-on` to create a swap component.

OFF ON

Swap volume icons

Use below given example for volume/mute swap component.

Swap icons with rotate effect

Apply the modifier class `swap-rotate` to enable a rotate effect for the swap component.

Hamburger button

Use below given example for hamburger button.

Emotes with flip effect

Apply the modifier class `swap-flip` to enable a flip effect for the swap component.

😈 😇

With JavaScript

Using class names

Utilize the component class `swap-js` to designate a specific swap component for JavaScript functionality, allowing the swap to function without a checkbox. Toggling the modifier class `swap-active` on a click event of the swap component facilitates this behavior.

🥵 🥶 🥳 😭

Illustrations

RTL swap

Use below given example for RTL swap.

LTR RTL

Play pause button

Use below given example for play-pause button.

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`swap`	component	Base class for swap component.
`swap-js`	component	It targets the swap component working with JS instead of checkbox.
`swap-on`	part	It targets a child element that should be visible when the checkbox is checked or when the swap component is active.
`swap-off`	part	It targets a child element that should not be visible when the checkbox is not checked or when the swap component is inactive.
`swap-indeterminate`	part	It targets a child element that should be visible when checkbox is indeterminate.
`swap-flip`	style	Adds flip effect to swap content.
`swap-rotate`	style	Adds rotate effect to swap content.
`swap-active`	state	Activates the swap (no need for checkbox).