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 + MobileBêtaSuperpositions

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

Quand ne pas l’utiliser

Installer

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

Styles

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

Importer

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	Défaut	Description
`onOpenChange`requis	`(open: boolean) => void`	—	Called when it closes.
`onPrimary`requis	`() => void`	—	What it does.
`open`requis	`boolean`	—	Shown (controlled).
`people`requis	`readonly [{ src?: string \| null \| undefined; name: string; }, { src?: string \| null \| undefined; name: string; }]`	—	The two people: avatar URLs and names.
`primaryLabel`requis	`string`	—	The main action (“Send a message”).
`secondaryLabel`requis	`string`	—	The way back (“Keep swiping”).
`title`requis	`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.

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

Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub