Status Modal

StatusModals provide critical information and require user action to proceed. They support four distinct status variants and should be wrapped in a Modal component for proper overlay behavior.

Status Modal Playground

Preview

Code

Controls

Status:

Default

Success

Warning

Destructive

Checkbox:

Installation

You can add the status modal component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/focus @react-aria/interactions @react-aria/utils

Copy and paste the following code into your project.

StatusModal.tsx

Button.tsx

CheckboxLabel.tsx

Checkbox.tsx

Material.tsx

Loader.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

StatusModal is a presentational component that should be wrapped in a Modal for overlay behavior:

import { useState } from 'react';
import { Modal } from '@versaui/ui/components/Modal';
import { StatusModal } from '@versaui/ui/components/Modal';
import { Button } from '@versaui/ui/components/Button';
function Example() {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <>
            <Button onClick={() => setIsOpen(true)}>
                Show Status
            </Button>
            <Modal open={isOpen} onOpenChange={setIsOpen} size="sm">
                <StatusModal
                    status="success"
                    title="Project Published"
                    description="Your project is now live and accessible to your team."
                    confirmText="View Project"
                    cancelText="Dismiss"
                    onConfirm={() => setIsOpen(false)}
                    onCancel={() => setIsOpen(false)}
                />
            </Modal>
        </>
    );
}

Status Variants

Four status variants are available, each with its own color scheme and default icon:

// Default - Informational (purple icon)
<StatusModal status="default" title="Invite Team Members" ... />
// Success - Positive outcome (green icon)
<StatusModal status="success" title="File Uploaded" ... />
// Warning - Caution required (amber icon)
<StatusModal status="warning" title="Storage Limit" ... />
// Destructive - Dangerous action (red icon, red confirm button)
<StatusModal status="destructive" title="Delete Account" ... />

With Checkbox

Show a "Don't show again" checkbox for dismissible notifications:

<StatusModal
    status="default"
    title="New Feature Available"
    description="Check out our new dashboard features."
    showCheckbox={true}
    checkboxLabel="Don't show again"
    checkboxChecked={dontShow}
    onCheckboxChange={setDontShow}
    onConfirm={handleConfirm}
    onCancel={handleCancel}
/>

Custom Icon

Override the default status icon:

import { RocketLaunch } from '@phosphor-icons/react';
<StatusModal
    status="success"
    icon={<RocketLaunch size={24} weight="duotone" />}
    title="Launch Successful"
    description="Your application is now deployed."
    ...
/>

Accessibility

The StatusModal component follows accessibility best practices:

Focus management: Focus is trapped within the Modal when open
Keyboard navigation: Escape key closes the modal
Screen readers: Title and description are announced
Button labels: Clear action labels for confirm/cancel

StatusModal Props

Prop	Type	Default	Description
`status`	`'default' \| 'destructive' \| 'success' \| 'warning'`	`'default'`	Semantic status variant controlling colors and icon.
`title`	`string`	`—`	Modal title text (required).
`description`	`string`	`—`	Detail text below the title (required).
`icon`	`ReactNode`	`—`	Custom icon to override the default status icon.
`showCheckbox`	`boolean`	`true`	Show the "Don't show again" checkbox.
`checkboxLabel`	`string`	`'Don\'t show again'`	Label for the checkbox.
`checkboxChecked`	`boolean`	`false`	Checkbox checked state.
`confirmText`	`string`	`'Continue'`	Confirm button label.
`cancelText`	`string`	`'Cancel'`	Cancel button label.
`onConfirm`	`() => void`	`—`	Callback when confirm is clicked.
`onCancel`	`() => void`	`—`	Callback when cancel is clicked.
`onCheckboxChange`	`(checked: boolean) => void`	`—`	Callback when checkbox changes.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page