ResponsiveDialog

One question, asked the way the screen it lands on expects: a modal on a wide screen, a sheet from the bottom edge on a phone.

Import it from rei-kit/web: import { ResponsiveDialog } from 'rei-kit/web'

Open ResponsiveDialog in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { BaseButton } from 'rei-kit'
import { ResponsiveDialog } from 'rei-kit/web'

const open = ref(false)
</script>

<template>
  <BaseButton variant="danger" @click="open = true">Delete account</BaseButton>

  <ResponsiveDialog v-model="open" title="Delete this account?" close-label="Close" tone="alert">
    Everything in it goes with it. This cannot be undone.

    <template #actions>
      <BaseButton variant="secondary" @click="open = false">Keep it</BaseButton>
      <BaseButton variant="danger">Delete</BaseButton>
    </template>
  </ResponsiveDialog>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`title`	`string`	yes	The dialog's heading, and its accessible name. Already translated.
`closeLabel`	`string`	yes	Accessible name of the close button.
`subtitle`	`string`	''	A line under the title, on the sheet.
`tone`	`'default' \| 'alert'`	'default'	`alert` makes the wide one an `alertdialog`: an answer is required.
`dismissible`	`boolean`	true
`breakpoint`	`string`	'48rem'	Where it turns from a sheet into a modal. Any media width.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub