ComponentsComponents are reusable parts of the user interface that have been made to support a variety of applications. You can use individual components in many different patterns and contexts.

Accordion

Let users show and hide sections of related content on a page.

Badge

Small labels which hold small amounts of information, system feedback, or states.

Block

Used when grouping components into a block with consistent space between.

Button

Carry out an important action or navigate to another page.

Button group

Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.

Callout

Communicate important information through a strong visual emphasis.

Checkbox

Let the user select one or more options.

Container

Group information, create hierarchy, and show related information.

Date picker

Lets users select a date through a calendar without the need to manually type it in a field.

Details

Let users reveal more detailed information when they need it.

Divider

Indicate a separation of layout, or to distinguish large chunks of information on a page.

Drawer

A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.

Dropdown

Present a list of options to the user to select from.

File uploader

Help users select and upload a file.

Filter chip

Allow the user to enter information, filter content, and make selections.

Footer

Provides information related your service at the bottom of every page.

Form item

Wraps an input control with a text label, requirement label, helper text, and error text.

Form stepper

Provides a visual representation of a form through a series of steps.

Grid

Arrange a number of components into a responsive grid pattern.

Header

Provide structure to help users find their way around the service.

Hero banner

A visual band of text, including an image and a call to action.

Icon button

A compact button with an icon and no text.

Icons

A simple and universal graphic symbol representing an action, object, or concept to help guide the user.

Input

A single-line field where users can input and edit text.

Link

Wraps an anchor element to add icons or margins.

List

Organize information into brief and clear groups.

Microsite header

Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.

Modal

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

Notification banner

Display important page level information or notifications.

Pagination

Help users navigation between multiple pages or screens as part of a set.

Popover

A small overlay that opens on demand, used in other components.

Progress indicator

Provide feedback of progress to users while loading.

Radio

Allow users to select one option from a set.

Side menu

A side navigation that helps the user navigate between pages.

Skeleton loader

Provide visual feedback to users while loading a content heavy page or page element.

Spacer

Negative area between the components and the interface.

Table

A set of structured data that is easy for a user to scan, examine, and compare.

Tabs

Let users navigate between related sections of content, displaying one section at a time.

Text

Provides consistent sizing, spacing, and colour to written content.

Text area

A multi-line field where users can input and edit text.

Tooltip

A small popover that displays more information about an item.

Back button

Related to form pattern, currently tracking this need in services.View issues

Breadcrumb

Currently tracking this need in services.View issues

Error summary

Related to form pattern, currently tracking this need in services.View issues

Floating action button

Currently tracking this need in services.View issues

Menu button

Planned for development.View issues

Quick exit

Currently tracking this need in services.View issues

Rich text editor

Currently tracking this need in services.View issues

Skip to content

Currently tracking this need in services.View issues

Temporary notification

Planned for developmentView issues

Time picker

Currently tracking this need in services.View issues

Toggle button

Currently tracking this need in services.View issues

Status	Name	Category	Open issues
	Accordion	Content layout	View
	Badge	Feedback and alerts	View
	Block	Utilities	View
	Button	Inputs and actions	View
	Button group	Inputs and actions	View
	Callout	Content layout	View
	Checkbox	Inputs and actions	View
	Container	Content layout	View
	Date picker	Inputs and actions	View
	Details	Content layout	View
	Divider	Utilities	View
	Drawer	Structure and navigation	View
	Dropdown	Inputs and actions	View
	File uploader	Inputs and actions	View
	Filter chip	Feedback and alerts	View
	Footer	Structure and navigation	View
	Form item	Utilities	View
	Form stepper	Structure and navigation	View
	Grid	Utilities	View
	Header	Structure and navigation	View
	Hero banner	Content layout	View
	Icon button	Inputs and actions	View
	Icons	Utilities	View
	Input	Inputs and actions	View
	Link	Utilities	View
	List	Content layout	View
	Microsite header	Structure and navigation	View
	Modal	Feedback and alerts	View
	Notification banner	Feedback and alerts	View
	Pagination	Structure and navigation	View
	Popover	Content layout	View
	Progress indicator	Feedback and alerts	View
	Radio	Inputs and actions	View
	Side menu	Structure and navigation	View
	Skeleton loader	Feedback and alerts	View
	Spacer	Utilities	View
	Table	Content layout	View
	Tabs	Structure and navigation	View
	Text	Content layout	View
	Text area	Inputs and actions	View
	Tooltip	Feedback and alerts	View
	Back button	Inputs and actions	View
	Breadcrumb	Structure and navigation	View
	Error summary	Feedback and alerts	View
	Floating action button	Inputs and actions	View
	Menu button	Inputs and actions	View
	Quick exit	Structure and navigation	View
	Rich text editor	Inputs and actions	View
	Skip to content	Structure and navigation	View
	Temporary notification	Feedback and alerts	View
	Time picker	Inputs and actions	View
	Toggle button	Inputs and actions	View

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