Patterns

Canvas Patterns classify and document reusable solutions built to respond to common user scenarios. Following these guidelines allows us to design experiences that feel consistent and natural for users as they move between applications and ensures that our approach aligns with industry standards.

Patterns vs Components

Patterns and components 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. Here's an example: a text input is a standalone component with some built-in states. The pattern of form validation uses text inputs plus technical logic to let the user know if there has been an error in the data entry and triggers the approriate alerts to the user.

The patterns and components we use in Canvas use a combination of various Canvas components and tokens, which provide the visual UI layer which users interact with.

Contribute A Pattern

Looking to contribute a pattern to Canvas? Check out our Getting Started guidance for contribution or reach out to the #canvas slack channel to discuss.