Box is a primitive component that provides a common, ergonomic API around Canvas design tokens. It is highly flexible, and its primary purpose is to build other components.

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

Usage Guidance

Coming soon!


Basic Example

Hello, Box!


The As Prop

The as prop allows you to override the underlying element of a component or combine it with another component. By default, Box will render a div element, but sometimes that's not what you want. Below, we have a Box that we want to render as a semantic anchor element. The most noticeable transformation is that Box renders as a link. But also notice that while it still supports all BoxProps such as padding, it also supports semantic anchor element props such as href.

Style Props

Box exposes style props that allow you to modify styles in an ergonomic way across components. To learn more about individual sets of Box style props, consult the lists below.

Can't Find What You Need?

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

FAQ Section