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
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