Reflex | Button

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

Button

A button is a clickable element that is used to trigger an event.

rx.button("Click Me!")

Buttons can range in size and style. You can style it with traditional props or with the color scheme prop for ease of use.

rx.button_group(
    rx.button(
        "Example", bg="lightblue", color="black", size="sm"
    ),
    rx.button(
        "Example", bg="orange", color="white", size="md"
    ),
    rx.button("Example", color_scheme="red", size="lg"),
    space="1em",
)

Buttons can also have different visual states.

rx.button_group(
    rx.button(
        "Example",
        bg="lightgreen",
        color="black",
        is_loading=True,
    ),
    rx.button(
        "Example",
        bg="lightgreen",
        color="black",
        is_disabled=True,
    ),
    rx.button(
        "Example",
        bg="lightgreen",
        color="black",
        is_active=True,
    ),
    space="1em",
)

You can group buttons together using button group.

rx.button_group(
    rx.button(rx.icon(tag="minus"), color_scheme="red"),
    rx.button(rx.icon(tag="add"), color_scheme="green"),
    is_attached=True,
)

Buttons are use to trigger events using theon_click event handler.

0

class ButtonState(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1


def index():
    return rx.hstack(
        rx.button(
            "Decrement",
            bg="#fef2f2",
            color="#b91c1c",
            border_radius="lg",
            on_click=ButtonState.decrement,
        ),
        rx.heading(
            ButtonState.count,
            font_size="2em",
            padding_x="0.5em",
        ),
        rx.button(
            "Increment",
            bg="#ecfdf5",
            color="#047857",
            border_radius="lg",
            on_click=ButtonState.increment,
        ),
    )

Button

The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation.

Props

Prop	Type	Description
`icon_spacing`	int	The space between the button icon and label.
`is_active`	bool	If true, the button will be styled in its active state.
`is_disabled`	bool	If true, the button will be styled in its disabled state.
`is_full_width`	bool	If true, the button will take up the full width of its container.
`is_loading`	bool	If true, the button will show a spinner.
`loading_text`	str	The label to show in the button when isLoading is true If no text is passed, it only shows the spinner.
`size`	str	"lg" \| "md" \| "sm" \| "xs"
`variant`	str	"ghost" \| "outline" \| "solid" \| "link" \| "unstyled"
`color_scheme`	str	Built in color scheme for ease of use. Options: "whiteAlpha" \| "blackAlpha" \| "gray" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "cyan" \| "purple" \| "pink" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"
`type_`	str	The type of button.

Base Event Triggers

ButtonGroup

A group of buttons.

Props

Prop	Type	Description
`is_attached`	bool	If true, the borderRadius of button that are direct children will be altered to look flushed together.
`is_disabled`	bool	If true, all wrapped button will be disabled.
`spacing`	int	The spacing between the buttons.

Base Event Triggers

IconButton

A button with an icon.

Props

Prop	Type	Description
`type`	str	The type of button.
`aria_label`	str	A label that describes the button
`icon`	str	The icon to be used in the button.
`is_active`	bool	If true, the button will be styled in its active state.
`is_disabled`	bool	If true, the button will be disabled.
`is_loading`	bool	If true, the button will show a spinner.
`is_round`	bool	If true, the button will be perfectly round. Else, it'll be slightly round
`spinner`	str	Replace the spinner component when isLoading is set to true

Base Event Triggers

← FormControl Checkbox →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Button

0

Button

Props

Base Event Triggers

ButtonGroup

Props

Base Event Triggers

IconButton

Props

Base Event Triggers

[ Learn ]