NativeScript offers various dialogs, available via the Dialogs import from @nativescript/core, or globally.

ts
import { Dialogs } from '@nativescript/core'

Dialogs.alert(options)
Dialogs.action(options)
Dialogs.confirm(options)
Dialogs.prompt(options)
Dialogs.login(options)

// is the same as:
alert(options)
action(options)
confirm(options)
prompt(options)
login(options)

All dialogs take a DialogOptions object with the properties:

  • title: Sets the dialog title.
  • message : Sets the dialog message.
  • cancelable (Android only): Sets if the dialog can be canceled by taping outside of the dialog.
  • theme (Android only): Sets the theme of the Dialog. Usable themes can be found in R.style

See DialogOptions, R.style.

Avialable Dialogs ​

Alert ​

ts
Dialogs.alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
html
<StackLayout>
  <label
    text="Alert"
    (tap)="showAlert()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Action"
    (tap)="showAction()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Confirm"
    (tap)="showConfirm()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Prompt"
    (tap)="showPrompt()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Login"
    (tap)="showLogin()"
    textAlignment="left"
    padding="8"
  ></label>
</StackLayout>
tsx
alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
tsx
alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
svelte
alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
vue
alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})

A dialog for alerting the user.

See alert().

Action ​

ts
Dialogs.action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
}).then((result) => {
  console.log(result)
})
html
<StackLayout>
  <label
    text="Alert"
    (tap)="showAlert()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Action"
    (tap)="showAction()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Confirm"
    (tap)="showConfirm()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Prompt"
    (tap)="showPrompt()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Login"
    (tap)="showLogin()"
    textAlignment="left"
    padding="8"
  ></label>
</StackLayout>
tsx
action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
})
tsx
action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
})
svelte
action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
})
vue
action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
}).then((result) => {
  console.log(result)
})

A dialog for prompting the user to choose.

Note: destructiveActionsIndexes allows setting some actions as destructive - shown in red. iOS only.

See action().

Confirm ​

ts
Dialogs.confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
}).then((result) => {
  console.log(result)
})
html
<StackLayout>
  <label
    text="Alert"
    (tap)="showAlert()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Action"
    (tap)="showAction()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Confirm"
    (tap)="showConfirm()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Prompt"
    (tap)="showPrompt()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Login"
    (tap)="showLogin()"
    textAlignment="left"
    padding="8"
  ></label>
</StackLayout>
tsx
confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
})
tsx
confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
})
svelte
confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
})
vue
confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
}).then((result) => {
  console.log(result)
})

A dialog for prompting the user to confirm.

See confirm().

Prompt ​

ts
Dialogs.prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
}).then((result) => {
  console.log(result)
})
html
<StackLayout>
  <label
    text="Alert"
    (tap)="showAlert()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Action"
    (tap)="showAction()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Confirm"
    (tap)="showConfirm()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Prompt"
    (tap)="showPrompt()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Login"
    (tap)="showLogin()"
    textAlignment="left"
    padding="8"
  ></label>
</StackLayout>
tsx
prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
})
tsx
prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
})
svelte
prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
})
vue
prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
}).then((result) => {
  console.log(result)
})

A dialog for prompting the user for input.

  • defaultText: Sets the default text to display in the input box.
  • inputType: Sets the prompt input type: email, decimal, phone, number, text, password, or email
  • capitalizationType: Sets the prompt capitalization type. Avalable options: none, allCharacters, sentences, or words.

See prompt(), CoreTypes.AutocapitalizationType

Login ​

ts
Dialogs.login({
  title: 'Login!',
  message: 'Enter your credentials',
  okButtonText: 'Login',
  cancelButtonText: 'Cancel',
  userName: 'NativeScript',
  password: 'hunter2',
  // neutralButtonText: 'Neutral',
  // cancelable: true,
  // passwordHint: 'Your password',
  // userNameHint: 'Your username',
}).then((result) => {
  console.log(result)
})
html
<StackLayout>
  <label
    text="Alert"
    (tap)="showAlert()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Action"
    (tap)="showAction()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Confirm"
    (tap)="showConfirm()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Prompt"
    (tap)="showPrompt()"
    textAlignment="left"
    padding="8"
  ></label>
  <label
    text="Login"
    (tap)="showLogin()"
    textAlignment="left"
    padding="8"
  ></label>
</StackLayout>
tsx
  login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  })
}
tsx
  login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  })
}
svelte
  login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  })
}
vue
login({
  title: 'Login!',
  message: 'Enter your credentials',
  okButtonText: 'Login',
  cancelButtonText: 'Cancel',
  userName: 'NativeScript',
  password: 'hunter2',
  // neutralButtonText: 'Neutral',
  // cancelable: true,
  // passwordHint: 'Your password',
  // userNameHint: 'Your username',
}).then((result) => {
  console.log(result)
})

A dialog for prompting the user for credentials.

See login().

Native Component ​

Next
Alert