Component | Button

Render a button.

Node.js

ui.button("button-id", { 
    label: "Click me",
    onClick: () => console.log("clicked")
})

Python

ui.button(
    "button-id",
    label="Click me",
    on_click=lambda: print("clicked")
)

Appearance

Use the appearance property to easily style the button from a predefined set of options.

Node.js

ui.button("1", { label: "Primary", appearance: "primary" })
ui.button("2", { label: "Outline", appearance: "outline" })
ui.button("3", { label: "Warning", appearance: "warning" })
ui.button("4", { label: "Danger", appearance: "danger" })

Python

ui.button("1", label="Primary", appearance="primary")
ui.button("2", label="Outline", appearance="outline")
ui.button("3", label="Warning", appearance="warning")
ui.button("4", label="Danger", appearance="danger")

Or, use the style property to apply custom styles to the button.

Node.js

ui.button("custom", { 
    label: "Custom button", 
    style: { 
        backgroundColor: "black", 
        color: "white", 
        padding: "10px 20px", 
        borderRadius: "999px" 
    } 
})

Python

ui.button(
    "custom", 
    label="Custom button", 
    style={
        "backgroundColor": "black", 
        "color": "white", 
        "padding": "10px 20px", 
        "borderRadius": "999px"
    }
)

API reference

Function signature

Node.js

ui.button(
    id: string,
    properties?: Partial<{
        label: string,
        appearance: "primary" | "outline" | "warning" | "danger",
        onClick: () => void,
        style: Style
    }>
)

Python

ui.button(
    id: str,
    *,
    label: str | None = None,
    appearance: Literal["primary", "outline", "warning", "danger"] = "primary",
    on_click: Callable[[], None] | None = None,
    style: Style | None = None
)

Parameters

Node.js

id

required string

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

Python

id

required str

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

---

Node.js

properties.label

optional string

The label to display inside the button. If not provided, the label will be inferred from the id.

Python

label

optional str

The label to display inside the button. If not provided, the label will be inferred from the id.

---

Node.js

properties.appearance

optional string literal

The appearance of the button. Defaults to primary.

Options include:

• "primary"
• "outline"
• "warning"
• "danger"

Python

appearance

optional Literal

The appearance of the button. Defaults to primary.

Options include:

• "primary"
• "outline"
• "warning"
• "danger"

---

Node.js

properties.onClick

optional () => void

A callback function that is called when the button is clicked.

Python

on_click

optional Callable[[], None]

A callback function that is called when the button is clicked.

---

Node.js

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---