Components Explained

Components are interactive UI elements with a specific functional behaviour. These can vary in complexity: from basic components like buttons or text inputs, to more complicated components like a color picker. All of the components within Canvas have been created using Canvas Tokens which are consistent preset stylings used in both design libraries and code libraries alike. Think of these like the DNA that makes Workday products look and feel like they’re part of the same family.

The components in the official Canvas Figma libraries and Canvas Kit code repository have been created to be as universal, flexible and scaleable as possible. This means they can be of most value to the most amount of teams using them. Our mission is to provide you with high quality flexible building blocks so you can efficiently build a diverse set of cohesive Workday experiences.

Components vs Patterns

Components and Patterns are intrinsically related, but they are not the same. Components in and of themselves lack context. They are the essential building blocks by which UI solutions are built. Components help development teams to quickly and efficiently build UI solutions in a modular way.

Core patterns classify and document reusable UI solutions, or 'ways of doing things' built to respond to common user problems. An example of a patterns is the convention of how search bars and results work on eCommerce websites. Or the pattern of error messages reacting to user interactions. The patterns and components we use in Canvas are solutions built with similar visuals. These use a combination of various Canvas components and tokens, which provide the visual UI layer which users interact with.

Custom Components

Looking to create custom components with Canvas? Check out our Getting Started guidance for creating custom components with Canvas.

Component Status

Canvas components are available for the following platforms:

Component	Web	iOS	Android
Button	Yes	Yes	Yes
Action Bar	Yes	Yes	Yes
Segmented Control	Yes	No	No
Card	Yes	No	No
Expandable Container	Yes	Yes	Yes
List	No	Yes	Yes
Side Panel	Yes	No	No
Table	Yes	No	No
Tabs	Yes	Yes	Yes
Avatar	Yes	Yes	Yes
Banner	Yes	No	No
Loading Dots	Yes	No	No
Pill	Yes	Yes	Yes
Skeleton	Yes	Yes	Yes
Status Indicator	Yes	Yes	Yes
Checkbox	Yes	Yes	Yes
Color Input	Yes	No	No
Date Input	No	Yes	Yes
Date Picker	No	Yes	Yes
Form Field	Yes	No	No
Number Input	No	Yes	Yes
Radio	Yes	Yes	Yes
Select	Yes	No	No
Switch	Yes	No	No
Text Area	Yes	Yes	Yes
Text Input	Yes	Yes	Yes
Box	Yes	No	No
Flex	Yes	No	No
Grid	Yes	No	No
Bottom Navigation Bar	No	Yes	Yes
Breadcrumbs	Yes	No	No
Pagination	Yes	No	No
Alert Dialog	No	Yes	Yes
Bottom Sheet	No	Yes	Yes
Menu	Yes	Yes	Yes
Modal	Yes	No	No
Popup	Yes	No	No
Toast	Yes	No	No
Tooltip	Yes	No	No
Text	Yes	No	No
Body Text	Yes	No	No
Heading	Yes	No	No
Label Text	Yes	No	No
Subtext	Yes	No	No
Title	Yes	No	No

Contribute A Component

Looking to contribute a component to Canvas? Check out our Getting Started guidance for contribution for designers or for developers to learn more.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #canvas or #canvas-kitchannels on Slack.

FAQ Section