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: 14
Props described: 14 of 14
Bindable state: 0
Callback events: 1
Verified release: 0.57.40

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

density'comfortable' | 'touch'NoTarget density; omit to inherit the ThemeProvider setting.

Public export

Props

Bindable state

Callback events

Examples and explanation