s-m-r-t
Open the s-m-r-t source on GitHub Switch to dark color scheme
← All UI components

Feedback and overlays

Modal

Modal - An accessible dialog component Features: - Native dialog element for accessibility - Backdrop click to close (optional) - Escape key to close - Focus trap - Multiple sizes - Custom header/footer via snippets - Material 3 styling

Public export

typescript 
import { Modal } from '@happyvertical/smrt-ui/feedback';
Import path
@happyvertical/smrt-ui/feedback
Props
13
Props described
13 of 13
Bindable state
0
Callback events
1
Verified release
0.44.0

Props

NameTypeRequiredDescription
openbooleanNoWhether the modal is open
onClose() => voidNoCallback when modal requests to close
titlestringNoModal title
size'sm' | 'md' | 'lg' | 'xl' | 'full'NoModal size variant
placement'center' | 'start' | 'end'NoPlacement: center (default), start, or end for full-height drawers
closeOnBackdropbooleanNoWhether clicking backdrop closes modal
closeOnEscapebooleanNoWhether pressing Escape closes modal
showClosebooleanNoShow close button
headerSnippetNoCustom header snippet
footerSnippetNoCustom footer snippet
childrenSnippetNoMain content
ariaLabelstringNoARIA label for the dialog
ariaDescribedBystringNoARIA described by ID

Bindable state

This component has no bindable public state.

Callback events

  • onClose() => void

Examples and explanation

Feedback & Overlays Run the canonical package-owned example in the Playground. UI showcase Read the curated UI story for mechanism and usage guidance. smrt-ui package reference See package status, version, limitations, and all public subpaths.