The moment two people choose each other — a match, a pair, a deal: the two avatars meet at a heart in the brand gradient, the next step under them.

Web + MobileBetaOverlays

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

When to use

When not to use

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { MatchDialog } from "@krizaka/ui/match-dialog";

Opened at load: the two avatars, the message button.

Two people choose each other: the avatars meet at a heart in the brand gradient, the next step under them.

Prop	Type	Default	Description
`onOpenChange`required	`(open: boolean) => void`	—	Called when it closes.
`onPrimary`required	`() => void`	—	What it does.
`open`required	`boolean`	—	Shown (controlled).
`people`required	`readonly [{ src?: string \| null \| undefined; name: string; }, { src?: string \| null \| undefined; name: string; }]`	—	The two people: avatar URLs and names.
`primaryLabel`required	`string`	—	The main action (“Send a message”).
`secondaryLabel`required	`string`	—	The way back (“Keep swiping”).
`title`required	`string`	—	The headline (“It's a match!”) — passed translated; the dialog's name.
`description`	`string`	—	A line under it.

A dialog named by its title, announced when it opens; a success tick on React Native.
The entrance is skipped under reduced motion.

Keys	Action
`Esc`	Closes it (the way back).

Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub