• Docs
  • Blog
    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Feature FlagsForLocal StoragePortalShowsplitPropsTheme

    Prompt Modal

    The Prompt Modal is used to prompt the user for input, such as a passkey or confirmation for destructive actions.

    • npm
    • source
    • recipe
    import { PromptModal, usePromptModal } from '@cerberus/react'

    Usage

    Non-destructive

    Destructive

    Customization

    For customizing the Prompt Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.

    API

    export interface PromptModalProviderValue {
    show: (options: PromptModalOptions) => Promise<string>
    }
    define function PromptModal(props: PropsWithChildren<{}>): ReactNode

    Show Method Options

    The show method accepts the following options:

    NameDefaultDescription
    kindnon-destructiveThe variant used to theme the modal.
    headingThe heading of the modal.
    descriptionThe description of the modal.
    keyA string key to test the user input against.
    actionTextThe text for the action button.
    cancelTextThe text for the cancel button.

    On this page

    • Edit this page on Github
    Cerberus Design System | Docs