︲

︲

Button

A custom button component.

Installation

Copy the following code into your app directory.

uv

buridan add component button
Usage
from components.ui.button import Button
Anatomy

Use the following composition to build a Button

button()
Examples

Below are examples demonstrating how the component can be used.

Sizes

Showcases buttons in different predefined sizes (default, small, large, icon, etc).

import reflex as rx
from components.ui.button import button


def button_sizes():
    return rx.el.div(
        button("Small", size="sm"),
        button("Default", size="default"),
        button("Large", size="lg"),
        class_name="flex items-center gap-3",
    )
Default

The default visual style for buttons with standard background and hover effects.

from components.ui.button import button


def button_default():
    return button("Default", variant="default", size="sm")
Secondary

A more muted alternative to the default button, useful for less prominent actions.

from components.ui.button import button


def button_secondary():
    return button("Secondary", variant="secondary", size="sm")
Outline

Buttons with a bordered outline, blending well with minimal UIs or light themes.

from components.ui.button import button


def button_outline():
    return button("Outline", variant="outline")
Ghost

A button style with no background or border, ideal for subtle UI actions.

from components.ui.button import button


def button_ghost():
    return button("Ghost", variant="ghost")
Link

A button styled to look like a hyperlink — useful for inline actions or navigation.

from components.ui.button import button


def button_link():
    return button("Link", variant="link")
Destructive

A bold style used for destructive or dangerous actions like “Delete”.

from components.ui.button import button


def button_destructive():
    return button("Destructive", variant="destructive")
Icon

Examples showing icon-only buttons with varying sizes for compact UI elements.

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


def button_icon():
    return button(
        hi("Mail01Icon", class_name="size-4"), variant="outline", size="icon-sm"
    )