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 loads on client.

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 loads on client.

PopperDialog

Lightweight popper-style prompt.

Demo loads on client.

TouchTip

Touch-friendly guidance prompt.

Demo loads on client.

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 trap inside dialog
Focus restore on close
ARIA attributes by default