︲

︲

Toggle

Custom toggle component.

Installation

Copy the following code into your app directory.

uv

buridan add component toggle
Usage
from components.ui.toggle import Toggle
Anatomy

Use the following composition to build a Toggle

toggle()
Examples
Icon Toggle Variants

Use toggle() for a pressable on/off control. Control icon behavior with icon_variant="fill" to fill icons on press, or omit it and style manually using data-[pressed] selectors (e.g. text-* or fill-*).

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.toggle import toggle


def toggle_general():
    return rx.el.div(
        toggle(
            hi(
                "Bookmark02Icon",
                class_name="size-4",
            ),
            "Bookmark",
            icon_variant="fill",
        ),
        toggle(
            hi("TextUnderlineIcon", class_name="size-4"),
            "Underline",
        ),
        class_name="flex flex-row gap-x-2 items-center justify-center",
    )
Pressed State

Use default_pressed=True to set the default pressed state of a toggle.

from components.icons.hugeicon import hi
from components.ui.toggle import toggle


def toggle_pressed_state():
    return toggle(hi("TextItalicIcon", class_name="size-4"), default_pressed=True)
Disabled

Set disabled=True to disable a toggle.

from components.icons.hugeicon import hi
from components.ui.toggle import toggle


def toggle_disabled():
    return toggle(hi("TextUnderlineIcon", class_name="size-4"), disabled=True)