# Government of Alberta Design System

> Documentation for the GoA Design System — components, patterns,
> examples, and guidance for building Alberta government digital services.
> Full site: https://design.alberta.ca

## Components

> Each /components/{slug}.md page contains the full API for React,
> Angular, and Web Components (props, events, slots), usage guidance,
> accessibility guidance, and links to related examples.

- [Accordion](/components/accordion.md): Let users show and hide sections of related content on a page.
- [Badge](/components/badge.md): Small labels which hold small amounts of information, system feedback, or states.
- [Block](/components/block.md): Group components into a block with consistent space between.
- [Button](/components/button.md): Carry out an important action or navigate to another page.
- [Button group](/components/button-group.md): Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
- [Callout](/components/callout.md): Communicate important information through a strong visual emphasis.
- [Checkbox](/components/checkbox.md): Let the user select one or more options.
- [Checkbox list](/components/checkbox-list.md): A multiple selection input.
- [Circular progress indicator](/components/circular-progress.md): Provide feedback of progress to users while loading.
- [Container](/components/container.md): Group information, create hierarchy, and show related information.
- [Data Grid](/components/data-grid.md): Advanced table with sorting and selection.
- [Date picker](/components/date-picker.md): Lets users select a date through a calendar without the need to manually type it in a field.
- [Details](/components/details.md): Let users reveal more detailed information when they need it.
- [Divider](/components/divider.md): Indicate a separation of layout, or to distinguish large chunks of information on a page.
- [Drawer](/components/drawer.md): 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](/components/dropdown.md): Present a list of options to the user to select from.
- [Dropdown multiselect](/components/dropdown-multiselect.md): Present a list of options to the user to select multiple values from.
- [File uploader](/components/file-upload-input.md): Help users select and upload a file.
- [Filter chip](/components/filter-chip.md): Allow the user to enter information, filter content, and make selections.
- [Footer](/components/footer.md): Provides information related your service at the bottom of every page.
- [Form item](/components/form-item.md): Wraps an input control with a text label, requirement label, helper text, and error text.
- [Grid](/components/grid.md): Arrange a number of components into a responsive grid pattern.
- [Header](/components/app-header.md): Provide structure to help users find their way around the service.
- [Hero banner](/components/hero-banner.md): A visual band of text, including an image and a call to action.
- [Icon button](/components/icon-button.md): A compact button with an icon and no text.
- [Icons](/components/icon.md): A simple and universal graphic symbol representing an action, object, or concept to help guide the user.
- [Input](/components/input.md): A single-line field where users can input and edit text.
- [Linear progress indicator](/components/linear-progress.md): Provide visual feedback to users while loading.
- [Link](/components/link.md): Wraps an anchor element to add icons or margins.
- [Menu button](/components/menu-button.md): A button with more than one action.
- [Microsite header](/components/microsite-header.md): Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.
- [Modal](/components/modal.md): An overlay that appears in front of all other content, and requires a user to take an action before continuing.
- [Notification banner](/components/notification.md): Display important page level information or notifications.
- [Notification Panel](/components/work-side-notification-panel.md): A notification center panel that displays notification items within a work side menu, with tabs for filtering by unread, urgent, and all notifications.
- [Page Block](/components/page-block.md): Full-width section with optional background.
- [Pagination](/components/pagination.md): Help users navigation between multiple pages or screens as part of a set.
- [Popover](/components/popover.md): A small overlay that opens on demand, used in other components.
- [Push Drawer](/components/push-drawer.md): A panel that pushes the main page content aside on desktop, falling back to an overlay drawer on smaller screens.
- [Radio](/components/radio-group.md): Allow users to select one option from a set.
- [Scroll Panel](/components/scroll-panel.md): A bounded container with sticky header and footer slots that scrolls its body content when it overflows.
- [Side menu](/components/side-menu.md): A side navigation that helps the user navigate between pages.
- [Skeleton loader](/components/skeleton.md): Provide visual feedback to users while loading a content heavy page or page element.
- [Spacer](/components/spacer.md): Negative area between the components and the interface.
- [Table](/components/table.md): A set of structured data that is easy for a user to scan, examine, and compare.
- [Tabs](/components/tabs.md): Let users navigate between related sections of content, displaying one section at a time.
- [Temporary notification](/components/temporary-notification.md): A notification that appears at the bottom of the screen.
- [Text](/components/text.md): Provides consistent sizing, spacing, and colour to written content.
- [Text area](/components/text-area.md): A multi-line field where users can input and edit text.
- [Tooltip](/components/tooltip.md): A small popover that displays more information about an item.
- [Work Side Menu](/components/work-side-menu.md): Side menu variant for worker applications.
- [Workspace Layout](/components/workspace-layout.md): A full-page layout for workspace-style applications that wraps your content responsively.

## Examples

> Usage patterns and page compositions built with GoA Design System components.

- [Activate a specific tab with a button](/examples/activate-a-specific-tab-with-a-button)
- [Add a filter chip](/examples/add-a-filter-chip)
- [Add a record using a drawer](/examples/add-a-record-using-a-drawer)
- [Add and edit lots of filters](/examples/add-and-edit-lots-of-filters)
- [Add another item in a modal](/examples/add-another-item-in-a-modal)
- [Ask a long answer question with a maximum word count](/examples/ask-a-long-answer-question-with-a-maximum-word-count)
- [Ask a user for a birthday](/examples/ask-a-user-for-a-birthday)
- [Ask a user for an address](/examples/ask-a-user-for-an-address)
- [Ask a user for an Indian registration number](/examples/ask-a-user-for-an-indian-registration-number)
- [Ask a user for direct deposit information](/examples/ask-a-user-for-direct-deposit-information)
- [Ask a user for dollar amounts](/examples/ask-a-user-for-dollar-amounts)
- [Basic page layout](/examples/basic-page-layout)
- [Button with Icon](/examples/button-with-icon)
- [Card grid](/examples/card-grid)
- [Card view of case files](/examples/card-view-of-case-files)
- [Confirm a change](/examples/confirm-a-change)
- [Confirm a destructive action](/examples/confirm-a-destructive-action)
- [Confirm before navigating away](/examples/confirm-before-navigating-away)
- [Copy to clipboard](/examples/copy-to-clipboard)
- [Disabled button with a required field](/examples/disabled-button-with-a-required-field)
- [Display numbers in a table so they can be scanned easily](/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily)
- [Display user information](/examples/display-user-information)
- [Dynamically add an item to a dropdown list](/examples/dynamically-add-an-item-to-a-dropdown-list)
- [Dynamically change items in a dropdown list](/examples/dynamically-change-items-in-a-dropdown-list)
- [Error pages](/examples/error-pages): Standard error screens for Government of Alberta services. Use when a user lands somewhere that is missing, forbidden, or broken so they understand what happened and what to do next.
- [Expand or collapse part of a form](/examples/expand-or-collapse-part-of-a-form)
- [Filter a list using a push drawer](/examples/filter-a-list-using-a-push-drawer)
- [Filter data in a table](/examples/filter-data-in-a-table)
- [Header with navigation](/examples/header-with-navigation)
- [Hero banner with actions](/examples/hero-banner-with-actions)
- [Hide and show many sections of information](/examples/hide-and-show-many-sections-of-information)
- [Include a link in the helper text of an option](/examples/include-a-link-in-the-helper-text-of-an-option)
- [Include descriptions for items in a checkbox list](/examples/include-descriptions-for-items-in-a-checkbox-list)
- [Limit the width of helper text](/examples/limit-the-width-of-helper-text)
- [Link the user to give feedback to the service](/examples/link-the-user-to-give-feedback-to-the-service)
- [Link to an external page](/examples/link-to-an-external-page)
- [Notify the user of a future service outage](/examples/notify-the-user-of-a-future-service-outage)
- [Question page](/examples/question-page): A question page presents one focused step in a multi-step form. Several variants adapt the shape: section titles, progress indicators, supporting context, expandable help, and grouped fields.
- [Remove a filter](/examples/remove-a-filter)
- [Require user action before continuing](/examples/require-user-action-before-continuing)
- [Reset date picker field](/examples/reset-date-picker-field)
- [Result page](/examples/result-page): A result page shown after a citizen has submitted a form, application, or task. Confirms success, explains what happens next, and points the user at any follow-up actions.
- [Reveal input based on a selection](/examples/reveal-input-based-on-a-selection)
- [Review and action](/examples/review-and-action)
- [Review page](/examples/review-page): A review page lets a user check their answers at the end of a form or section before submitting. Each answer has a "change" link so the user can revise without starting over.
- [Search](/examples/search)
- [Select one or more from a list of options](/examples/select-one-or-more-from-a-list-of-options)
- [Set a max width on a long radio item](/examples/set-a-max-width-on-a-long-radio-item)
- [Set a specific tab to be active](/examples/set-a-specific-tab-to-be-active)
- [Show a label on an icon only button](/examples/show-a-label-on-an-icon-only-button)
- [Show a notification](/examples/show-a-notification)
- [Show a notification with an action](/examples/show-a-notification-with-an-action)
- [Show a user progress](/examples/show-a-user-progress)
- [Show a user progress when the time is unknown](/examples/show-a-user-progress-when-the-time-is-unknown)
- [Show different views of data in a table](/examples/show-different-views-of-data-in-a-table)
- [Show full date in a tooltip](/examples/show-full-date-in-a-tooltip)
- [Show links to navigation items](/examples/show-links-to-navigation-items)
- [Show multiple actions in a compact table](/examples/show-multiple-actions-in-a-compact-table)
- [Show multiple tags together](/examples/show-multiple-tags-together)
- [Show number of results per page](/examples/show-number-of-results-per-page)
- [Show quick links](/examples/show-quick-links)
- [Show status in a table](/examples/show-status-in-a-table)
- [Show status on a card](/examples/show-status-on-a-card)
- [Show version number](/examples/show-version-number)
- [Slotted error text in a form item](/examples/slotted-error-text-in-a-form-item)
- [Slotted helper text in a form item](/examples/slotted-helper-text-in-a-form-item)
- [Sort data in a table](/examples/sort-data-in-a-table)
- [Start page](/examples/start-page): The front door to a government service for a citizen. It is the way into the service and how citizens access it. Each government service has a start page on Alberta.ca.
- [Task list page](/examples/task-list-page): A page that provides structure for multiple steps in a service. Use a task list to outline the entire process and show the status of each task as users move through it.
- [Type to create a new filter](/examples/type-to-create-a-new-filter)
- [Warn a user of a deadline](/examples/warn-a-user-of-a-deadline)