Modal
A dialog that appears above the page content, either centred on screen or anchored to the bottom as a mobile sheet. Supports a feature icon badge, image or stacked-avatar header, rich body content via the children slot, and flexible action button layouts.
Default
The standard dialog — feature icon, title, description, and two action buttons.
Blog post published
This blog post has been published. Team members will be able to edit this post and republish changes.
Icon variants
Four semantic colour roles — primary, success, warning, and error.
Update your password
Choose a new secure password for your account.
Blog post published
Your post is now live and visible to all visitors.
Unsaved changes
Do you want to save or discard changes?
Something went wrong
We couldn't complete your request. Please try again.
Destructive
Pass isDestructive to make the primary action button render in the danger colour.
Delete blog post
Are you sure you want to delete this post? This action cannot be undone.
Horizontal layout
Set layout="horizontal" to place the icon to the left of all content. Wider modal (size="lg") is recommended.
Blog post published
This blog post has been published. Team members will be able to edit this post and republish changes.
Bottom sheet
position="bottom" anchors the modal to the bottom of the viewport — ideal for mobile interactions. Use actionsLayout="vertical" to stack the buttons.
Blog post published
This blog post has been published. Team members will be able to edit this post.
Centered
align="center" horizontally centres the icon and all text.
Blog post published
This blog post has been published. Team members will be able to edit this post.
Actions with checkbox
actionsLayout="horizontal-with-checkbox" places a checkbox on the left and the buttons on the right. Pass the controlled checkbox state from the parent.
Blog post published
This blog post has been published. Team members will be able to edit this post and republish changes.
User avatar
Pass userAvatar to render a name/avatar row below the description — useful for access-request or confirmation dialogs.
Candice has requested edit access
Candice has requested access to your project Website Design.
Team avatars
Pass up to three items in avatarGroup to render a stacked avatar fan instead of the icon badge.
You've been added to the team!
Thanks for accepting the invite. You've now been added to the team as an editor.
Image
Pass image to render a full-width cover image at the top.
Blog post published
This blog post has been published. Team members will be able to edit this post and republish changes.
Children — checkbox list
Use the children slot to embed a list of checkboxes or other selection controls.
Blog post published
This blog post has been published. Team members will be able to edit this post and republish changes.
Custom content
The children slot renders any content between the description and the actions row — forms, checkbox lists, OTP inputs, and more.
Update payment method
Update your card details.
Children — OTP input
Embed a verification code UI in children alongside a centred layout.
Please check your email.
We've sent a code to olivia@example.com
Didn't get a code? .