︲

︲

Button

Displays a button or a component that looks like a button.

Installation

Copy the following code into your app directory.

uv

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

Anatomy

Use the following composition to build a Button component.

button()

Examples

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