Button

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

For more information about the available gestures, see Gestures.

<Button text="Tap me!" tap="onTap" />

import { Button } from '@nativescript/core'

export function onTap(args) {
  const button = args.object as Button
  // execute your custom logic here...
}

Styling the 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 #

<Button text="Tap me!"/>

Sets the label of the button.

textWrap #

<Button text="Tap me!" textWrap="true" />

Gets or sets whether the widget wraps the text of the label. Useful for longer labels. Default value is false.

isEnabled #

button.isEnabled = false

Make the button disabled or enabled. A disabled button is unusable and un-clickable. Default value is true.

Inherited #

For additional inherited properties, refer to the API Reference.

Event(s) #

tap #

<Button text="Tap me!" tap="{{ onTap }}" />

export class HelloWorldModel extends Observable {
  onTap(args: EventData) {}
}

Emitted when the button is tapped. Event type is EventData

Native component #