Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.Support for the Long Term Support (LTS) version of the Design system will be available until September 2025. View the upgrade guide
AllAccordionCalloutContainerDetailsHero bannerListPopoverTableTextBadgeFilter chipModalNotification bannerProgress indicatorSkeleton loaderTooltipButtonButton groupCheckboxDate pickerDropdownFile uploaderIcon buttonInputRadioText areaDrawer FooterForm stepperHeaderMicrosite headerPaginationSide menuTabsBlockDividerForm itemGridIconsLinkSpacer
ModalGitHub issuesFigmaAn overlay that appears in front of all other content, and requires a user to take an action before continuing.Related:Button group, Callout
Code playground
Show Modal
Are you sure you want to exit your application?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.

CancelExit
Properties
Examples

Basic Modal

Open Basic Modal
Heading
SecondaryPrimary

Content

Confirm a destructive action

Delete record
Are you sure you want to delete this record?
CancelDelete record

This action cannot be undone.

Warn a user of a deadline

Save for later
Complete submission prior to 1PM
I understand

You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

Do not make the modal closeable or add any focusable elements before the action button when using an AlertDialog. This ensures that the screen reader will announce the full content.

Confirm a change

Save and continue
Address has changed
Undo address changeConfirm
Before
123456 78 Ave NW, Edmonton, Alberta
After
881 12 Ave NW, Edmonton, Alberta

Add another item

Add another item
Add a new item
CancelSave new item

Fill in the information to create a new item

Route changes

Open
Are you sure you want to change route?
CancelChange route
Design
Detailed design documentation for this component can be found on its component page in Figma.
Accessibility
Accessibility documentation for this component can be found on its component page in Figma. More accessibility guidance for design and development is coming soon.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes