A message the reader has to take in before carrying on.
Import it from rei-kit:
import { BaseAlert } from 'rei-kit'
Open BaseAlert 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 { BaseAlert } from 'rei-kit'
</script>
<template>
<BaseAlert tone="warning">
<template #title>Unsaved changes</template>
Leave now and the last edit is lost.
</BaseAlert>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
tone | 'info' | 'success' | 'warning' | 'danger' | 'info' | |
assertive | boolean | false | Announce immediately, interrupting. For failures the reader must act on. |
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.