Navigation

Pages

Home

Docs

Components

Dashboards

Blocks

Typeset

Create

Getting Started

Introduction

Installation

Skills

CLI

JavaScript

dev

components.json

Changelog

llms.txt

Utilities

Markdown

Scroll Fade

Shimmer

Resources

Chart

Client State Var

Events & Actions

State Structure

Theming

Typeset

Charts

Area Chart

Bar Chart

Line Chart

Components

Accordion

Attachment

Avatar

Badge

Bubble

Button

Button Group

Card

Checkbox

Collapsible

Dialog

Field

Frame

Input

Input Group

Marker

Menu

Message

Radio Group

Select

Separator

Spinner

Switch

Table

Tabs

Textarea

Typography

Button

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

Installation

Command to install the Button component.

buridan add button

uv run buridan add button

python -m 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"`

External Tools

︲

On This Page