A dialog that arrives from nowhere.
Import it from rei-kit/web:
import { BaseModal } from 'rei-kit/web'
Open BaseModal in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseButton } from 'rei-kit'
import { BaseModal } from 'rei-kit/web'
const open = ref(false)
</script>
<template>
<BaseButton @click="open = true">Delete account</BaseButton>
<BaseModal v-model="open" title="Delete account?" close-label="Close" tone="alert">
This cannot be undone.
<template #actions>
<BaseButton variant="secondary" @click="open = false">Cancel</BaseButton>
<BaseButton variant="danger">Delete</BaseButton>
</template>
</BaseModal>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
title | string | yes | Names the dialog for assistive tech. Required; an unnamed dialog is a box. |
closeLabel | string | yes | Accessible name for the close button. |
tone | 'default' | 'alert' | 'default' | `alert` marks it as a decision that interrupts — `role="alertdialog"`, which a screen reader announces immediately rather than on arrival. |
dismissible | boolean | true | Whether Escape and the backdrop close it. Off for a dialog that must be answered — but never off as a way of forcing a reader to a decision they have not been given the information for. |
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.