Box
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.
Usage Guidance
Coming soon!
Examples
Basic Example
import * as React from 'react';
import {createComponent} from '@workday/canvas-kit-react/common';
import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
interface CustomCardProps extends BoxProps {
// custom Card props go here
}
const CustomCard = createComponent('div')({
displayName: 'CustomCard',
Component: (props: CustomCardProps, ref, Element) => {
return <Box as={Element} ref={ref} borderRadius="m" depth={1} padding="m" {...props} />;
},
});
export default () => {
return <CustomCard>Hello, Box!</CustomCard>;
};
Props
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. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.