Button

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

For more information about the available gestures, see Gestures.

<Buttontext="This is a button!" />

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

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

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

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

<Buttontext="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>
 <Spantext="This text has a " />
 <Spantext="red "style="color: red" />
 <Spantext="piece of text. " />
 <Spantext="Also, this bit is italic, "fontStyle="italic" />
 <Spantext="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) => {
constbutton= args.object asButton
 console.log(`The button has been tapped!`)
})

Emitted when the button is tapped

See TapGestureEventData.

Native component ​

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

Contributors