Components
Composable ModalComposable Modal is a modal container that allows flexible content layouts. It uses the same modal behaviour and accessibility as Dialog, but does not enforce the standard header/content/footer structure.
Usage
Use Composable Modal for focused tasks that need a custom layout inside a modal. For confirmations, simple forms, and standard “Save/Cancel” flows, use Dialog. Use Snackbar for minor notifications.
Formatting
Anatomy
Composable Modal provides a container and a content area. It does not enforce header or footer regions. You must structure the content with a clear hierarchy and reading order.
A. Container
B. Content area
Layout
The content area has no default padding, so add padding in your layout—at least 16 px (p-4) is suggested for primary content.
Content slot
As the Composable modal is essentially an empty container, add your content in the content slot in Figma and build the layout using design system components.
Confirming and dismissing
Because composable modal allows for freedom regarding content, make sure to have a clear way to exit and confirm settings within the component. Confirming is typically a primary button at the bottom of the modal. Provide a clear secondary action for dismissing near the primary action, or an X button in the top-right corner.
Confirming and dismissive actions in a footer section.
A dismissive action as an icon button in the upper right corner.
Accessibility
As layout and function are largely free, make sure accessibility is ensured. Keep in mind requirements such as focus handling, meaningful title, logical focus order, and keyboard reachability.
Behaviour
Sizing
The Composable Modal expands horizontally in smaller devices with a margin from the borders of the container to the edges of the screen. On larger devices the modal can expand freely but with a maximum width of 640 px. Vertically, content determines the length of the container. If the content exceeds the max height, overflow scrolling needs to be handled within the modal body.