Prompt
A component that displays a dialog prompting the user for their approval. It's useful when confirming destructive actions.
Note: This component is useful if you want to control the prompt's content, format, and design. For a simpler approach that follows Medusa's prompt format, refer to the usePrompt hook.
In this guide, you'll learn how to use the Prompt component.
Was this example helpful?
Usage#
1<Prompt>2 <Prompt.Trigger>Trigger</Prompt.Trigger>3 <Prompt.Content>4 <Prompt.Header>5 <Prompt.Title>Title</Prompt.Title>6 <Prompt.Description>Description</Prompt.Description>7 </Prompt.Header>8 <Prompt.Footer>9 <Prompt.Cancel>Cancel</Prompt.Cancel>10 <Prompt.Action>Delete</Prompt.Action>11 </Prompt.Footer>12 </Prompt.Content>13</Prompt>
API Reference#
Prompt#
This component is based on the Radix UI Alert Dialog primitives.
Prop | Type | Default |
---|---|---|
variant | "danger" | "confirmation" | "danger" |
Was this helpful?
Prompt.Header#
This component is based on the div
element and supports all of its props
Prompt.Footer#
This component is based on the div
element and supports all of its props
Examples#
Confirmation Prompt Variant#
The confirmation
variant is useful when confirming an operation that isn't destructive, such as deleting an item.
Was this guide helpful?