Skip to content
dialog / modal
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

dialog / modal

Fragment reference dialog / modal
tags
ui

Interruptive overlay dialog. The DSL alias modal maps to wa-dialog.

Note: The modal component is temporarily disabled in wireframe previews to avoid interfering with the documentation interface. Use modal=false to render inline for wireframes.

Attributes

AttributeTypeDefaultDescription
titlestring-Header title.
openbooleantrueVisibility state.
sizesm | md | lgmdDialog width (DSL).
variantalert-Visual intent (e.g. destructive warning).
nativebooleanfalseRenders a system-native alert style.
modalbooleantrueIf false, renders as an inline sheet (wireframe mode).
without-headerbooleanfalseHides the header.
light-dismissbooleanfalseCloses on clicking outside.