Modal

The Modal component creates overlay dialogs that focus user attention on specific content or actions, with backdrop blur, animations, and various configuration options.

Usage

import { Modal, ButtonType } from 'blend-v1'
import { useState } from 'react'

function MyComponent() {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <>
            <button onClick={() => setIsOpen(true)}>Open Modal</button>

            <Modal
                isOpen={isOpen}
                onClose={() => setIsOpen(false)}
                title="Modal Title"
                subtitle="Optional subtitle for the modal"
                primaryAction={{
                    text: 'Save',
                    buttonType: ButtonType.PRIMARY,
                    onClick: () => {
                        console.log('Primary action clicked')
                        setIsOpen(false)
                    },
                }}
                secondaryAction={{
                    text: 'Cancel',
                    buttonType: ButtonType.SECONDARY,
                    onClick: () => setIsOpen(false),
                }}
            >
                <div>Modal content goes here</div>
            </Modal>
        </>
    )
}

API Reference

ModalButtonAction Type

The primaryAction and secondaryAction props accept a ModalButtonAction object with the following properties:

Features

• Overlay backdrop with blur effect
• Responsive design with max-width and max-height constraints
• Scrollable content area
• Optional header with title and subtitle
• Optional footer with action buttons
• Close button in header (configurable)
• Backdrop click to close (configurable)
• Custom header right slot
• Divider lines between sections (configurable)
• Automatic scroll lock when modal is open
• Keyboard accessibility support

Usage Examples

Basic Modal

Simple modal with title and content

<Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    title="Basic Modal"
    subtitle="Optional subtitle"
>
    <div>Your content here</div>
</Modal>

Modal with Actions

Modal with primary and secondary action buttons

<Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    title="Confirm Action"
    primaryAction={{
        text: 'Save',
        buttonType: ButtonType.PRIMARY,
        onClick: handleSave,
    }}
    secondaryAction={{
        text: 'Cancel',
        buttonType: ButtonType.SECONDARY,
        onClick: () => setIsOpen(false),
    }}
>
    <div>Are you sure you want to save?</div>
</Modal>

Modal with Loading Action

Modal with a loading primary action

<Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    title="Processing"
    primaryAction={{
        text: 'Processing...',
        buttonType: ButtonType.PRIMARY,
        loading: true,
        onClick: handleProcess,
    }}
>
    <div>Please wait while we process your request.</div>
</Modal>

Custom Modal

Modal with custom configuration

<Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    showCloseButton={false}
    closeOnBackdropClick={false}
    showDivider={false}
>
    <div className="text-center">
        <h3>Custom Modal</h3>
        <p>This modal has custom behavior</p>
        <button onClick={() => setIsOpen(false)}>Close</button>
    </div>
</Modal>

Component Tokens

You can style the modal component using the following tokens:

export type ModalTokensType = {
    shadow: CSSObject['boxShadow']
    zIndex: CSSObject['zIndex']
    borderRadius: CSSObject['borderRadius']
    headerContainer: {
        padding: CSSObject['padding']
        borderBottom: CSSObject['borderBottom']
        borderTop: CSSObject['borderTop']
        borderLeft: CSSObject['borderLeft']
        borderRight: CSSObject['borderRight']
        borderRadius: CSSObject['borderRadius']
        backgroundColor: CSSObject['backgroundColor']
        header: {
            color: CSSObject['color']
            fontSize: CSSObject['fontSize']
            fontWeight: CSSObject['fontWeight']
        }
        subtitle: {
            color: CSSObject['color']
            fontSize: CSSObject['fontSize']
        }
    }
    bodyContainer: {
        padding: CSSObject['padding']
        borderBottom: CSSObject['borderBottom']
        borderTop: CSSObject['borderTop']
        borderLeft: CSSObject['borderLeft']
        borderRight: CSSObject['borderRight']
        borderRadius: CSSObject['borderRadius']
        backgroundColor: CSSObject['backgroundColor']
    }
    footerContainer: {
        padding: CSSObject['padding']
        borderBottom: CSSObject['borderBottom']
        borderTop: CSSObject['borderTop']
        borderLeft: CSSObject['borderLeft']
        borderRight: CSSObject['borderRight']
        borderRadius: CSSObject['borderRadius']
        backgroundColor: CSSObject['backgroundColor']
        alignItems: CSSObject['alignItems']
        gap: CSSObject['gap']
    }
}