Button

A Button component provides an easy-to-use way for interacting through the application and invoking custom logic in response to that. Once the user taps it, the button performs any actions attached to it.

Usage

A Button component can execute custom logic via its tap event. Handling the event is as easy as using (tap) in HTML, and implementing a tap handler in your component.

XML
JavaScript
TypeScript

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

function onTap(args) {
    const button = args.object;
    alert(`Tapped ${count} times!`);
}
exports.onTap = onTap;

export function onTap(args: EventData) {
    const button = <Button>args.object;
    alert("Tapped " + count + " times!");
}

Improve this document

Demo Source

Styling

The Button component can be styled using CSS or corresponding properties.

<StackLayout>
    <!-- No styles applied -->
    <Button text="Button"></Button>
    <!-- Using local CSS class -->
    <Button text=".my-button" class="my-button"></Button>
    <!-- Using nativescript-theme-core CSS classes -->
    <Button text="Button.-primary" class="-primary"></Button>
    <Button class="-primary">
        <FormattedString>
            <Span text="&#xf099;" class="fab"></Span>
            <Span text=" Button.-primary with icon"></Span>
        </FormattedString>
    </Button>
    <Button text="Button.-outline" class="-outline"></Button>
    <Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>
    <Button text="Button.-primary.-rounded-lg" class="-primary -rounded-lg"></Button>
    <Button text="Button.-outline.-rounded-sm" class="-outline -rounded-sm"></Button>
    <Button text="Button.-outline.-rounded-lg" class="-outline -rounded-lg"></Button>
    <Button text="Button.-outline[isEnabled=false]" isEnabled="false" class="-outline"></Button>
    <Button text="Button.-primary[isEnabled=false]" isEnabled="false" class="-primary"></Button>
</StackLayout>

.my-button {
    android-elevation: 4;
    background-color: lightseagreen;
    border-color: darkolivegreen;
    border-radius: 20;
    border-width: 1;
    color: whitesmoke;
    font-size: 18;
    font-weight: bold;
}

.my-button:active {
    android-elevation: 8;
    background-color: whitesmoke;
    border-color: darkolivegreen;
    border-radius: 20;
    border-width: 1;
    color: lightseagreen;
    font-size: 18;
    font-weight: bold;
}

Specific Styling Properties

Name	CSS Name	Type	Description
`androidElevation`	`android-elevation`	number	(Android only) Gets or sets the elevation of the android view.
`androidDynamicElevationOffset`	`android-dynamic-elevation-offset`	number	(Android only) Gets or sets the dynamic elevation offset of the android view.

Improve this document

Demo Source

Tips And Tricks

Creating Button via Code-Behind

Creating a Button programmatically with text value and a tap callback.

XML
JavaScript
TypeScript

<StackLayout id="container" verticalAlignment="middle"/>

const myButton = new Button();
myButton.text = "Tap me!";
myButton.className = "btn btn-primary btn-active";
myButton.on("tap", (data) => {
    // args is of type EventData
    alert("Button Tapped!");
});

const myButton = new Button();
myButton.text = "Tap me!";
myButton.className = "btn btn-primary btn-active";
myButton.on(Button.tapEvent, (data: GestureEventData) => {
    // data is of type GestureEventData
    alert("Button Tapped!");
});

Properties

Name	Type	Description
`text`	`string`	Gets or sets the label of the button.

Events

Name	Description
`tap`	Emitted when the button is tapped.
`loaded`	Emitted when the view is loaded.
`unloaded`	Emitted when the view is unloaded.
`layoutChanged`	Emitted when the layout bounds of a view changes due to layout processing.

API References

Name	Type
tns-core-modules/ui/button	`Module`
Button	`Class`

Native Component

Android	iOS
android.widget.Button	UIButton

NativeScript Core