Ioniconf 2022 logo

Uniting our global community of Ionic developers and contributors. May 25, 2022.

DocsPluginsCLI
pwaiosandroid

Modals

The Modals API provides methods for triggering native modal windows for alerts, confirmations, and input prompts, as well as Action Sheets.

Example

import { Plugins, ActionSheetOptionStyle } from '@capacitor/core';

const { Modals } = Plugins;

async showAlert() {
  let alertRet = await Modals.alert({
    title: 'Stop',
    message: 'this is an error'
  });
}

async showConfirm() {
  let confirmRet = await Modals.confirm({
    title: 'Confirm',
    message: 'Are you sure you\'d like to press the red button?'
  });
  console.log('Confirm ret', confirmRet);
}

async showPrompt() {
  let promptRet = await Modals.prompt({
    title: 'Hello',
    message: 'What\'s your name?'
  });
  console.log('Prompt ret', promptRet);
}

async showActions() {
  let promptRet = await Modals.showActions({
    title: 'Photo Options',
    message: 'Select an option to perform',
    options: [
      {
        title: 'Upload'
      },
      {
        title: 'Share'
      },
      {
        title: 'Remove',
        style: ActionSheetOptionStyle.Destructive
      }
    ]
  })
  console.log('You selected', promptRet);
}

API

alert(…)

alert(options: AlertOptions) => Promise<void>

Show an alert modal

Param Type
options AlertOptions

prompt(…)

prompt(options: PromptOptions) => Promise<PromptResult>

Show a prompt modal

Param Type
options PromptOptions

Returns: Promise<PromptResult>


confirm(…)

confirm(options: ConfirmOptions) => Promise<ConfirmResult>

Show a confirmation modal

Param Type
options ConfirmOptions

Returns: Promise<ConfirmResult>


showActions(…)

showActions(options: ActionSheetOptions) => Promise<ActionSheetResult>

Show an Action Sheet style modal with various options for the user to select.

Param Type
options ActionSheetOptions

Returns: Promise<ActionSheetResult>


Interfaces

AlertOptions

Prop Type
title string
message string
buttonTitle string

PromptResult

Prop Type
value string
cancelled boolean

PromptOptions

Prop Type
title string
message string
okButtonTitle string
cancelButtonTitle string
inputPlaceholder string
inputText string

ConfirmResult

Prop Type
value boolean

ConfirmOptions

Prop Type
title string
message string
okButtonTitle string
cancelButtonTitle string

ActionSheetResult

Prop Type
index number

ActionSheetOptions

Prop Type Description
title string
message string iOS only
options ActionSheetOption[]

ActionSheetOption

Prop Type Description
title string
style ActionSheetOptionStyle
icon string Icon for web (ionicon naming convention)

Enums

ActionSheetOptionStyle

Members Value
Default "DEFAULT"
Destructive "DESTRUCTIVE"
Cancel "CANCEL"
Previous
<- Local Notifications
Next
Motion ->
Contribute ->