Dialog

Dialogs surface important information and confirmations, including BottomDialog / BlowDialog / PopperDialog / TouchTip variants.

BottomDialog

Bottom-aligned dialog with customizable buttons and motion.

BottomDialog

Bottom sheet confirmation dialog.

Demo will load when visible.

<template>
  <TxButton @click="bottomOpen = true">Show dialog</TxButton>
  <TxBottomDialog
    v-if="bottomOpen"
    title="Confirm action"
    message="Are you sure you want to continue?"
    :btns="[
      { content: 'Cancel', type: 'info', onClick: () => true },
      { content: 'Confirm', type: 'success', onClick: async () => true },
    ]"
    :close="() => (bottomOpen = false)"
  />
</template>

Button types

const btns = [
  { content: 'Info', type: 'info', onClick: () => true },
  { content: 'Warning', type: 'warning', onClick: () => true },
  { content: 'Error', type: 'error', onClick: () => true },
  { content: 'Success', type: 'success', onClick: () => true },
]

Auto confirm timer

const btns = [
  {
    content: 'Auto confirm',
    type: 'success',
    time: 5,
    onClick: () => true,
  },
]

Loading state

const btns = [
  {
    content: 'Submit',
    type: 'success',
    onClick: async () => {
      await saveData()
      return true
    },
  },
]

BlowDialog

A centered dialog with dramatic animation.

BlowDialog

Focused, high-impact dialog.

Demo will load when visible.

<template>
  <TxButton @click="blowOpen = true">Show blow dialog</TxButton>
  <TxBlowDialog
    v-if="blowOpen"
    title="Welcome"
    message="<strong>Hello!</strong> Welcome to the app."
    :close="() => (blowOpen = false)"
  />
</template>

PopperDialog

Lightweight popper-style prompt.

Demo will load when visible.

<template>
  <TxButton @click="popperOpen = true">Show popper dialog</TxButton>
  <TxPopperDialog
    v-if="popperOpen"
    title="Tip"
    message="This is a short tip."
    :close="() => (popperOpen = false)"
  />
</template>

TouchTip

Touch-friendly guidance prompt.

Demo will load when visible.

<template>
  <TxButton @click="tipOpen = true">Show TouchTip</TxButton>
  <TxTouchTip
    v-if="tipOpen"
    title="Notice"
    message="Pick an action."
    :buttons="[
      { content: 'Cancel', type: 'info', onClick: () => true },
      { content: 'Confirm', type: 'success', onClick: async () => true },
    ]"
    :close="() => (tipOpen = false)"
  />
</template>

Custom components

import CustomContent from './CustomContent.vue'

function showCustomDialog() {
  return h(TxBlowDialog, {
    comp: CustomContent,
    close: () => {},
  })
}

Render function

function showRenderDialog() {
  return h(TxBlowDialog, {
    render: () => h('div', [
      h('h2', 'Dynamic content'),
      h('p', 'Created with a render function'),
    ]),
    close: () => {},
  })
}

API

TxBottomDialog props

Name	Type	Default	Description
`title`	`string`	`''`	Dialog title
`message`	`string`	`''`	Dialog message
`stay`	`number`	`0`	Auto close duration (ms)
`close`	`() => void`	required	Close callback
`btns`	`DialogButton[]`	`[]`	Button configs
`icon`	`string`	`''`	Icon class
`index`	`number`	`0`	z-index offset

DialogButton interface

interface DialogButton {
  content: string
  type?: 'info' | 'warning' | 'error' | 'success'
  time?: number
  onClick: () => Promise<boolean> | boolean
  loading?: (done: () => void) => void
}

TxBlowDialog props

Name	Type	Default	Description
`title`	`string`	`''`	Dialog title
`message`	`string`	`''`	Message (HTML supported)
`close`	`() => void`	required	Close callback
`comp`	`Component`	`undefined`	Custom component
`render`	`() => VNode`	`undefined`	Render function

TxPopperDialog props

Name	Type	Default	Description
`title`	`string`	`''`	Dialog title
`message`	`string`	`''`	Message (HTML supported)
`close`	`() => void`	required	Close callback
`comp`	`Component`	`undefined`	Custom component
`render`	`() => VNode`	`undefined`	Render function

TxTouchTip props

Name	Type	Default	Description
`title`	`string`	`''`	Title
`message`	`string`	`''`	Message text
`buttons`	`TouchTipButton[]`	`[]`	Button configs
`close`	`() => void`	required	Close callback

Accessibility

ESC to close
Focus moves to the dialog container or confirm button on open
Focus restore on close
role="dialog", aria-modal, and instance-scoped title/description ARIA links by default
DialogButton.onClick() closes the dialog when it returns true and keeps it open when it returns false