Modal
Open a titled dialog from a supplied trigger.
Preview
Import
import { Modal, ConfirmDialog, PromptDialog, ResponsiveDialog, Lightbox, ImagePreview, Spotlight, CommandMenu, ActionMenu, OverflowMenu, MegaMenu, ContextPanel, PopoverForm, FloatingPanel, TooltipGroup, Tour, TourStep, Coachmark, HotkeyProvider, ShortcutRecorder } from "@sigil-ui/components";Usage
<Modal trigger={<Button>Open modal</Button>} title="Modal Title" description="This is a modal dialog.">
<p>Modal content goes here.</p>
</Modal>Sub-components
This component includes the following parts:
<ConfirmDialog><PromptDialog><ResponsiveDialog><Lightbox><ImagePreview><Spotlight><CommandMenu><ActionMenu><OverflowMenu><MegaMenu><ContextPanel><PopoverForm><FloatingPanel><TooltipGroup><Tour><TourStep><Coachmark><HotkeyProvider><ShortcutRecorder>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | — | Trigger configuration. |
title | ReactNode | — | Heading displayed in the component. |
description | ReactNode | — | Supporting text below the heading. |
footer | ReactNode | — | Footer configuration. |
children | ReactNode | — | Content rendered inside the component. |
contentClassName | string | — | Content Class Name configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-text-muted | Text muted |
--s-border | Border |
--s-card-radius | Card radius |
--s-surface | Surface |
--s-shadow-lg | Shadow lg |
--s-overlay-surface | Overlay surface |
--s-overlay-shadow | Overlay shadow |
--s-text | Text |