Dialog
A modal that grows out of its button, traps focus and gives it back.
Features
- Grows out of its button on the morph spring, over a soft backdrop.
Use it for
- Confirmations.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Dialog } from 'runets'
<Dialog trigger="Delete branch" title="Delete this branch?" description="…" confirm="Delete" onConfirm={remove} />API
| Prop | Type | What it does |
|---|---|---|
title | string | Heading. |
description | string | Body. |
confirm | string | Confirm label. |
onConfirm | () => void | Called on confirm. |
Accessibility
- Modal: focus is trapped and returns to the button; Escape cancels.
Source
The code is in src/kit/overlays.tsx in runets, MIT licensed.