Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

Modal

An overlay that appears in front of all other content, and requires a user to take an action before continuing.

Related components: Button group, Callout
Code examples
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

Basic Modal

Open Basic Modal
Heading
SecondaryPrimary

Content

Confirm a destructive action

Delete my application
Are you sure you want to delete this application?
CancelDelete application

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.

Confirm record 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 guidelines
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 startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes