Help

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#

Code
import { Prompt } from "@medusajs/ui"

Code
<Prompt>
  <Prompt.Trigger>Trigger</Prompt.Trigger>
  <Prompt.Content>
    <Prompt.Header>
      <Prompt.Title>Title</Prompt.Title>
      <Prompt.Description>Description</Prompt.Description>
    </Prompt.Header>
    <Prompt.Footer>
      <Prompt.Cancel>Cancel</Prompt.Cancel>
      <Prompt.Action>Delete</Prompt.Action>
    </Prompt.Footer>
  </Prompt.Content>
</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?