Skip to main content
Button(props: { action: () => void; label: Component }): Component;
Button(label: string, action: () => void): Component;
Button(label: Component, action: () => void): Component;
​
label
string | Component
required
The button’s visible content. Can be a plain string or any component for custom layouts.
​
action
() => void
required
Callback invoked when the button is tapped.
When using the object form:
​
props.action
() => void
required
Callback invoked when the button is tapped.
​
props.label
Component
required
A component to use as the button label.

​
Support

​
Usage

​
Simple text button

Button("Save", () => {
    console.log("Saved!")
})

​
Button with component label

Button(
    HStack({ spacing: 8 }, [
        Image({ systemName: "checkmark" }),
        Text("Save")
    ]),
    () => handleSave()
)

​
Object form

Button({
    action: () => handleSave(),
    label: HStack([
        Image({ systemName: "checkmark" }),
        Text("Save")
    ])
})

​
Styled button

Button("Primary Action", () => {})
    .foregroundStyle(Color("white"))
    .padding({ horizontal: 16, vertical: 10 })
    .background(Color("blue"))
    .cornerRadius(8)

​
Disabled button

Button("Submit", () => {})
    .disabled(true)

​
See Also