Button

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

❯buridan add button

Component Guide

Use the following to build the Button component.

from components.ui.button import button

button()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/button.py

Examples

Sizes

Use the size prop to change the button's size.

Props used: size on button.

import reflex as rx

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


def button_size() -> rx.Component:
    return rx.el.div(
        rx.el.div(
            button("Extra Small", size="xs", variant="outline"),
            button(
                hi("ArrowUpRight03Icon"),
                size="icon-xs",
                aria_label="Submit",
                variant="outline",
            ),
            class_name="flex items-start gap-2",
        ),
        rx.el.div(
            button("Small", size="sm", variant="outline"),
            button(
                hi("ArrowUpRight03Icon"),
                size="icon-sm",
                aria_label="Submit",
                variant="outline",
            ),
            class_name="flex items-start gap-2",
        ),
        rx.el.div(
            button("Default", variant="outline"),
            button(
                hi("ArrowUpRight03Icon"),
                size="icon",
                aria_label="Submit",
                variant="outline",
            ),
            class_name="flex items-start gap-2",
        ),
        rx.el.div(
            button("Large", variant="outline", size="lg"),
            button(
                hi("ArrowUpRight03Icon"),
                size="icon-lg",
                aria_label="Submit",
                variant="outline",
            ),
            class_name="flex items-start gap-2",
        ),
        class_name="flex flex-col items-start gap-8 sm:flex-row",
    )

Default

Props used: none required — variant="default" is the default.

from components.ui.button import button


def button_default():
    return button("Button")

Secondary

Props used: variant on button.

from components.ui.button import button


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

Outline

Props used: variant on button.

from components.ui.button import button


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

Ghost

Props used: variant on button.

from components.ui.button import button


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

Link

Props used: variant on button.

from components.ui.button import button


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

Destructive

Props used: variant on button.

from components.ui.button import button


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

Icon

Props used: size="icon" on button.

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


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

With Icon

Add data-icon="inline-start" or data-icon="inline-end" to the icon child for correct spacing.

Props used: data_icon on the icon child.

import reflex as rx

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


def button_with_icon() -> rx.Component:
    return rx.el.div(
        button(
            hi("GitBranchIcon", custom_attrs={"data-icon": "inline-start"}),
            "New Branch",
            variant="outline",
        ),
        button(
            "Fork",
            hi("GitForkIcon", custom_attrs={"data-icon": "inline-end"}),
            variant="outline",
        ),
        class_name="flex gap-2",
    )

Rounded

Props used: class_name="rounded-full" on button.

import reflex as rx

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


def button_rounded() -> rx.Component:
    return rx.el.div(
        button(
            "Get Started",
            class_name="rounded-full",
        ),
        button(
            hi("ArrowUp02Icon"),
            variant="outline",
            size="icon",
            class_name="rounded-full",
        ),
        class_name="flex gap-2",
    )

Spinner

Render a spinner() inside the button for a loading state, with the same data-icon positioning convention as icons.

Props used: data_icon on the spinner child.

import reflex as rx

from components.ui.button import button
from components.ui.spinner import spinner


def button_loading() -> rx.Component:
    return rx.el.div(
        button(
            spinner(custom_attrs={"data-icon": "inline-start"}),
            "Generating",
            variant="outline",
        ),
        button(
            "Downloading",
            spinner(custom_attrs={"data-icon": "inline-end"}),
            variant="secondary",
            disabled=True,
        ),
        class_name="flex gap-2",
    )

As Link

Use button_variants(...) to generate the button's classes as a plain Var, applied to a real rx.el.a. Don't wrap an <a> inside button(...) — the underlying Base UI Button always sets role="button", which overrides the link's semantic role.

Props used: variant, size args on button_variants(...).

import reflex as rx

from components.ui.button import button_variants


def button_render() -> rx.Component:
    return rx.el.a(
        "Login",
        href="#",
        class_name=button_variants(variant="secondary", size="sm"),
    )

API Reference

button

button("Click me", variant="outline", size="sm")

Prop	Type	Default
`variant`	`Literal["default", "destructive", "outline", "secondary", "ghost", "link"]`	`"default"`
`size`	`Literal["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"]`	`"default"`
`class_name`	`str`	`""`

Any other prop accepted by the underlying Base UI Button is also passed straight through.

button_variants

Returns the same classes button(...) would apply, as a plain Var[str] — for styling a non-button element (like a link) to look like a button, without wrapping it in an actual <button>.

rx.el.a(
    "Go to docs",
    href="/docs",
    class_name=button_variants("outline", "sm"),
)

Arg	Type	Default
`variant`	`Literal["default", "destructive", "outline", "secondary", "ghost", "link"]`	`"default"`
`size`	`Literal["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"]`	`"default"`