︲

︲

Toggle

A two-state button that can be either on or off.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component toggle
from components.ui.component import toggle

Anatomy

Use the following composition to build a Toggle component.

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)