Button

<Button> is a UI component that displays a button which reacts to user gestures.

For more information about the available gestures, see Gestures.

<Button text="This is a button!" />

<button text="This is a button!" (tap)="tapMe($event)"></button>

<button
  onTap={() => {
    alert('Button Clicked')
  }}
>
  Click Me
</button>

<button on:tap={() => alert('button clicked')}>Click Me</button>

<button text="this is a button" on:tap={showAlert}></button>

<Button text="This is a button!" @tap="showAlert"></Button>

Examples ​

Formatting text inside a Button ​

If you need to style parts of the text, you can use a combination of a FormattedString and Span elements.

<Button>
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Button>

Props ​

text ​

text: string

Sets the text shown in the button.

textWrap ​

textWrap: boolean

Gets or sets whether the button should wrap longer text to new lines.

Default value is false.

isEnabled ​

isEnabled: boolean

Allows disabling the button. A disabled button does not react to user gestures.

Default value is true.

...Inherited ​

For additional inherited properties, refer to the API Reference.

Events ​

tap ​

on('tap', (args: TapGestureEventData) => {
  const button = args.object as Button
  console.log(`The button has been tapped!`)
})

Emitted when the button is tapped

See TapGestureEventData.

Native component ​

• Android: android.widget.Button
• iOS: UIButton