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

Search documentation...




[ Learn ]

[ Concepts ]

[ Reference ]


Props modify the behavior and appearance of a component. They are passed in as keyword arguments to the component function.

Component Props

Each component has props that are specific to that component. For example, the rx.avatar component has a name prop that sets the name of the avatar.
rx.avatar(name="John Doe")
Check the docs for the component you are using to see what props are available.

Style Props

In addition to component-specific props, most built-in components support a full range of style props. You can use any CSS property to style a component.
    "Fancy Button",
    box_shadow="rgba(151, 65, 252, 0.8) 0 15px 30px -10px",
    background_image="linear-gradient(144deg,#AF40FF,#5B42F3 50%,#00DDEB)",
        "opacity": 1,
See the styling docs to learn more about customizing the appearance of your app.

HTML Props

Components support many standard HTML properties as props. For example: the HTML id property is exposed directly as the prop id. The HTML className property is exposed as the prop class_name (note the Pythonic snake_casing!).
Hello World
    "Hello World",

Binding Props to State

Reflex apps can have a State that stores all variables that can change when the app is running, as well as the event handlers that can change those variables.
State may be modified in response to things like user input like clicking a button, or in response to events like loading a page.
State vars can be bound to component props, so that the UI always reflects the current state of the app.
You can set the value of a prop to a state var to make the component update when the var changes.
Try clicking the badge below to change its color.
Hello World
class PropExampleState(rx.State):
    text: str = "Hello World"
    color: str = "red"

    def flip_color(self):
        if self.color == "red":
            self.color = "blue"
            self.color = "red"

def index():
    return rx.badge(
            "cursor": "pointer",
In this example, the color_scheme prop is bound to the color state var.
When the flip_color event handler is called, the color var is updated, and the color_scheme prop is updated to match.

Conditional Props

Sometimes you want to set a prop based on a condition. You can use the rx.cond function to do this.
class PropCondState(rx.State):
    value: int

def index():
    return rx.slider(
            PropCondState.value > 50, "green", "pink"
← Components OverviewPages →

Copyright © 2023 Pynecone, Inc.