More topics

Component library

Last updated on September 19, 2024

Find design assets, code and technical docs for user interface components.

On this page:

Get started with components​

Available components

This library is a work in progress. We release components when both design and code implementations are ready. To learn more about our backlog, view the roadmap.

Header

An illustration of the header component

The header helps the user identify authorship and navigate a product or service.

Footer

An illustration of the footer component

The footer is used to display secondary information and navigation.

Buttons

An illustration of the button component in various states

Buttons enable the user to take an important action.

Inline alert

An illustration of the inline alert component

An inline alert displays an important message to the user.

Select (dropdown menu)

An illustration of the dropdown menu component

Dropdown menus enable the user to select an option from a list.

Dialogs

An illustration of the modal dialog component

Modal dialogs present critical information or actions to the user, blocking the rest of the UI.

Checkbox

An illustration of the checkbox group component

A checkbox group enables the user to select one or more options from a list.

Radio

An illustration of the radio group component

A radio group enables the user to select one option from a mutually-exclusive list.

Text field

An illustration of the text field component

A text field enables the user to enter a short amount of text into an interface or form.

Text area

An illustration of the text area component

A text area enables a user to enter multiple lines of text into an interface or form.

Switch

An illustration of the switch component in various states

Switches enable the user to toggle an option on or off.

Tags

An illustration of the tag component

Tags are used to label and filter content in an interface.

Tooltip

An illustration of the tooltip component

Tooltips provide additional information when a user hovers over or focuses an element.

 

Information for designers

You need a Figma license to make full use of the design system. Some functionality is not available on other account types. Access to the Government of B.C.'s enterprise license is administered by the CITZ Information Management Branch. Request access to Figma.

Recommended: install the managed library

If you are a member of the Government of B.C. organisation on Figma, you can add the B.C. Design System library to your projects directly.

Using this managed library makes it easy to receive updates when they are released.

Install the library

Download and import the library manually

If you are not a member of the Government of B.C. organisation, you can download the library via Figma Community.

You can then self-publish it as a library for yourself or your team to use in your projects.

Download the library

Information for developers

If you encounter a bug or have a question, create an issue on GitHub.  

The component library is built in React, and is installable via the npm registry. Releases are semantically versioned.

The library supports React v16.14.0 and later.

Core dependencies

The component library relies on these packages as core dependencies: 

A full list of dev dependencies is available on npm.

Developer resources

Find source code, documentation and tools to help you use components:

Changelogs for each release are on GitHub.

Support for other languages and frameworks

At this time, we do not officially support languages or frameworks other than React.

If you are reimplementing design system components in another format, consider sharing your work publicly for others to use. 

If your team or organisation has capacity to maintain an implementation in another format, please email designsystem@gov.bc.ca.