Shape

The shape is given by the border radius value we apply to certain UI elements for visual or functional reasons. Some common examples of elements that need rounded corners are cards, buttons and labels.

yarn add @workday/canvas-kit-react
Web Install
yarn add @workday/canvas-kit-react

Usage Guidance

  • We can define the shape of an element by applying a border radius value to it. The border-radius property defines the radius of the element's corners.
  • Every Canvas elements presents a specific shape that responds to the use and/or characteristics of this element.
  • Our Canvas shape token includes five values ranging from a zero border radius for a rectangular shape with sharp corners to a 999px border radius for a circular shape.

Canvas Shapes

ShapeVariableSizeRecommended Usage
shape 0 zero0This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
shape s s'2px'Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
shape m m'4px'Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
shape l l'8px'Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
circle circle'999px'Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.

Using our Shapes

When working with border-radius, there are certain things we need to consider:

Do
  • Be intentional when applying border-radius values following the usage guidelines above.
  • All corners should always have the same value applied to ensure the shape doesn’t get distorted.
Don’t
  • Avoid combining border-radius values.

Web Examples

import {borderRadius} from '@workday/canvas-kit-react/tokens';
borderRadius.m;

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section