New components library - Native UI

︲

︲

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

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",
    )

Sizes

Use the size prop to change the size of the toggle.

import reflex as rx

from components.ui.toggle import toggle


def toggle_sizes() -> rx.Component:
    return rx.el.div(
        toggle(
            "Small",
            variant="outline",
            aria_label="Toggle small",
            size="sm",
        ),
        toggle(
            "Default",
            variant="outline",
            aria_label="Toggle default",
            size="default",
        ),
        toggle(
            "Large",
            variant="outline",
            aria_label="Toggle large",
            size="lg",
        ),
        class_name="flex flex-wrap items-center gap-2",
    )

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)