Button#

The Button component in the Scripting app allows you to create interactive elements with customizable actions, labels, styles, and roles. Buttons can trigger actions, execute intents, and display various visual styles based on the configuration. This documentation provides a detailed guide on how to use the Button API, including its properties, roles, styles, and examples.

#Button

#Description

You create a button by providing an action or an intent and a label. The label can be a simple text, an icon, or a complex view. Buttons are essential for creating interactive interfaces, such as submitting forms or navigating between pages.

#Properties

#ButtonStyle

Defines the visual appearance of the button.

#ButtonBorderShape

Specifies the shape of the button's border when using bordered or borderedProminent styles.

#ControlSize

Defines the size of the button and other controls.

#CommonViewProps

These properties can be applied to customize the appearance and behavior of buttons within a view.

#Example Usage

#Basic Button with Action

<Button title="Sign in" action={handleSignIn} />

#Button with System Image

<Button title="Delete" systemImage="trash" role="destructive" action={handleDelete} />

#Button with Custom Label

<Button>
  <Text>Custom Label</Text>
</Button>

#Button Executing an AppIntent

<Button
  title="Start Workout"
  intent={MyStartWorkoutIntent({ duration: 30 })}
  buttonStyle="borderedProminent"
/>

#Styling Buttons

<Group
  buttonStyle="bordered"
  buttonBorderShape={{ roundedRectangleRadius: 8 }}
  controlSize="large"
>
  <Button title="Save" action={handleSave} />
</Group>

#Notes

• Use role to indicate buttons with specific purposes, such as canceling or destructive actions.
• Combine buttonStyle and buttonBorderShape for consistent theming across views.
• The intent property integrates buttons with Widget and LiveActivity for seamless interactions.

For further details on AppIntent, refer to the Interactive Widget and LiveActivity documentation.