Skip to content

Dialog

Instant Modal, alternative of window.alert or window.confirm

Usage

Alert

ts
import { dialog } from '@privyid/persona/core'

dialog.alert({
  title: 'Dialog',
  text : 'Hello This is Dialog',
})

Confirm

ts
import { dialog } from '@privyid/persona/core'

dialog.confirm({
  title: 'Delete Confirmation',
  text : 'Are you sure?',
  size: 'sm',
}).then((value) => {
  if (value === true) {
    dialog.alert({
      title: 'Info',
      text : 'Deleted',
    })
  }
})

Prompt

ts
import { dialog } from '@privyid/persona/core'

dialog.prompt({
  title: 'Welcome',
  text : 'What is your name?',
}).then((value) => {
  if (value) {
    dialog.alert({
      title: 'Info',
      text : `Hello ${value}`,
    })
  }
})

API

Confirm

confirm(options: DialogConfirmOption): Promise<boolean>

OptionsTypeDefaultDescription
titleString-Dialog title, required
textString-Dialog text content (support markdown)
sizeString-Dialog size, valid value is sm, md, lg, xl
centeredBooleanfalseDialog vertically center in the viewport
dismissableBooleantrueShow / Hide dismiss button
noCloseOnBackdropBooleanfalseNo close dialog while dialog Backdrop was clicked
footerAlignNumberstartThe alignment of dialog footer, valid value is start and end
cancelDialogButton-Cancel button's options for dialog footer
confirmDialogButton-Confirm button's options for dialog footer

DialogButton

OptionsTypeDefaultDescription
textString-Dialog button text
visibleBooleantrueShow or hide dialog button
classNameString-Add class to dialog button
closeModalBooleantrueClose dialog modal when dialog button was clicked
colorString-Dialog button color variant, valid value is default, primary, info, success, danger, warning
variantString-Dialog button style variant, valid value is solid, outline, ghost, and link

Alert

alert(options: DialogAlertOption): Promise<void>

OptionsTypeDefaultDescription
titleString-Dialog title, required
textString-Dialog text content
sizeString-Dialog size, valid value is sm, md, lg, xl
centeredBooleanfalseDialog vertically center in the viewport
footerAlignNumberstartThe alignment of dialog footer, valid value is start and end
confirmDialogButton-Confirm button's options for dialog footer

Prompt

prompt(options: DialogPromptOption): Promise<string>

OptionsTypeDefaultDescription
titleString-Dialog title, required
textString-Dialog text content (support markdown)
sizeString-Dialog size, valid value is sm, md, lg, xl
centeredBooleanfalseDialog vertically center in the viewport
dismissableBooleantrueShow / Hide dismiss button
noCloseOnBackdropBooleanfalseNo close dialog while dialog Backdrop was clicked
footerAlignNumberstartThe alignment of dialog footer, valid value is start and end
cancelDialogButton-Cancel button's options for dialog footer
confirmDialogButton-Confirm button's options for dialog footer
inputDialogInput-Input's options
valueString-Default input value

DialogInput

OptionsTypeDefaultDescription
typeStringtextInput type
sizeStringmdInput size variant, valid value: xs, sm, md, lg
placeholderString-Input placeholder
clearableBooleanfalseEnable clear button
acceptString-Whitelist character can be inputted

Released under the MIT License.