Premium & Brand

Receive Button

Family Receive pill that morphs into a confirmation card.

Import

tsx

import { ReceiveButton } from "@cronus-ui/ui";

bash

npx cronus-ui add receive-button

Examples

Family receive

The sky pill morphs into a confirmation card. Receive, Cancel, the close X, Escape, or the blurred backdrop all collapse it back. The CTA keeps its layoutId so it flies into the dialog.

Toggle layout with animation

tsx

<ReceiveButton />

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

ReceiveButtonLabels

Prop	Type	Default	Description
`receive`*	`string`	—	—
`confirm`*	`string`	—	—
`description`*	`string`	—	—
`cancel`*	`string`	—	—
`close`*	`string`	—	—
`hint`*	`string`	—	—

ReceiveButtonProps

Extends Omit< ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onAnimationEnd" | "onDrag" | "onDragStart" | "onDragEnd" >

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`onConfirm`	`() => void`	—	Fired when the dialog Receive action is pressed. The dialog then closes.
`labels`	`Partial<ReceiveButtonLabels>`	—	Override default English strings.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.