Style Props

Style props provide a common, ergonomic API for modifying a component’s styles by passing styles with props.

Style props are deprecated!

As we transition away from Emotion’s runtime costs, we advise to move away from using style props. Please use our styling utilities instead. For more information on this change, view our discussion on the Future of Styling.

You can use 14.1 codemod to automatic migration to cs prop. Migration Docs

System Prop Values

Many style props are design-system-aware and translate SystemPropValues for you automatically. In the example below, the padding prop translates the value s to 16px and frenchVanilla100 to #ffffff. These SystemPropValues are also included in our types, so your IDE’s intellisense should suggest these values as you work. This allows you to use Canvas design tokens fluidly without disrupting your workflow.


<Box padding="s" backgroundColor="frenchVanilla100">
  Hello, style props!
</Box>

There are seven types of system prop values: color, depth, font, fontSize, fontWeight, shape, and space — corresponding to our Canvas design tokens. Each style prop section below includes a table. The “System” column in that table will tell you which system prop values are supported.

Background

Background style props allow you to adjust the background styles of components.

Cinnamon 300

Sour Lemon 300

Blueberry 300

import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  display: 'inline-block',
  margin: 'xxs',
  minHeight: 'xl',
  minWidth: '8rem',
  padding: 'xs',
};

export default () => {
  return (
    <div>
      <Box backgroundColor="cinnamon300" {...baseStyles}>
        Cinnamon 300
      </Box>
      <Box backgroundColor="sourLemon300" {...baseStyles}>
        Sour Lemon 300
      </Box>
      <Box backgroundColor="blueberry300" {...baseStyles}>
        Blueberry 300
      </Box>
    </div>
  );
};

Prop	CSS Properties	System
background	background	color
backgroundAttachment	background-attachment	---
backgroundColor	background-color	color
backgroundImage	background-image	---
backgroundPosition	background-position	---
backgroundRepeat	background-repeat	---
backgroundSize	background-size	---

Border

Border style props allow you to adjust the border styles of components.

Cinnamon 300

Sour Lemon 300

Blueberry 300

import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper300',
  display: 'inline-block',
  margin: 'xxs',
  minHeight: 'xl',
  minWidth: '8rem',
  padding: 'xs',
};

export default () => (
  <div>
    <Box borderRadius="m" border="solid 4px" borderColor="cinnamon300" {...baseStyles}>
      Cinnamon 300
    </Box>
    <Box borderRadius="m" border="solid 4px" borderColor="sourLemon300" {...baseStyles}>
      Sour Lemon 300
    </Box>
    <Box borderRadius="m" border="solid 4px" borderColor="blueberry300" {...baseStyles}>
      Blueberry 300
    </Box>
  </div>
);

Prop	CSS Properties	System
border	border	---
borderBottom	border-bottom	---
borderBottomColor	border-bottom-color	color
borderBottomLeftRadius	border-bottom-left-radius	shape
borderBottomRightRadius	border-bottom-right-radius	shape
borderBottomStyle	border-bottom-style	---
borderBottomWidth	border-bottom-width	---
borderCollapse	border-collapse	---
borderColor	border-color	color
borderInlineEnd	border-inline-end	---
borderInlineEndColor	border-inline-end-color	color
borderInlineEndStyle	border-inline-end-style	---
borderInlineEndWidth	border-inline-end-width	---
borderInlineStart	border-inline-start	---
borderInlineStartColor	border-inline-start-color	color
borderInlineStartStyle	border-inline-start-style	---
borderInlineStartWidth	border-inline-start-width	---
borderLeft	border-left	---
borderLeftColor	border-left-color	color
borderLeftStyle	border-left-style	---
borderLeftWidth	border-left-width	---
borderRadius	border-radius	shape
borderRight	border-right	---
borderRightColor	border-right-color	color
borderRightStyle	border-right-style	---
borderRightWidth	border-right-width	---
borderSpacing	border-spacing	---
borderStyle	border-style	---
borderTop	border-top	---
borderTopColor	border-top-color	color
borderTopLeftRadius	border-top-left-radius	shape
borderTopRightRadius	border-top-right-radius	shape
borderTopStyle	border-top-style	---
borderTopWidth	border-top-width	---
borderWidth	border-width	---

Color

Color style props allow you to adjust the color styles of components.

Cinnamon 300

Sour Lemon 300

Blueberry 300

import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  display: 'inline-block',
  margin: 'xxs',
  minHeight: 'xl',
  minWidth: '8rem',
  padding: 'xs',
};

export default () => (
  <div>
    <Box backgroundColor="cinnamon300" color="blackPepper500" {...baseStyles}>
      Cinnamon 300
    </Box>
    <Box backgroundColor="sourLemon300" color="blackPepper500" {...baseStyles}>
      Sour Lemon 300
    </Box>
    <Box backgroundColor="blueberry300" color="blackPepper500" {...baseStyles}>
      Blueberry 300
    </Box>
  </div>
);

Prop	CSS Properties	System
backgroundColor	background-color	color
color	color	color
opacity	opacity	---

Depth

Depth style props allow you to adjust the depth styles of components.

Depth 1

Depth 2

Depth 3

import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  display: 'inline-block',
  margin: 'xxs',
  minHeight: 'xl',
  minWidth: '8rem',
  padding: 'xs',
};

export default () => (
  <div>
    <Box backgroundColor="cinnamon300" depth={1} {...baseStyles}>
      Depth 1
    </Box>
    <Box backgroundColor="sourLemon300" depth={2} {...baseStyles}>
      Depth 2
    </Box>
    <Box backgroundColor="blueberry300" depth={3} {...baseStyles}>
      Depth 3
    </Box>
  </div>
);

Prop	CSS Properties	System
boxShadow	box-shadow	---
depth	box-shadow	depth

Flex

Flex style props allow you to adjust the flex styles of components.

import {Flex} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  minHeight: 'xl',
  minWidth: '2rem',
  padding: 'xs',
};

export default () => (
  <Flex columnGap="xs">
    <Flex flexDirection="column" rowGap="xs" flex={1}>
      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
    </Flex>
    <Flex flexDirection="column" rowGap="xs" flex={2}>
      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
    </Flex>
    <Flex flexDirection="column" rowGap="xs" flex={1}>
      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
    </Flex>
  </Flex>
);

Prop	CSS Properties	System
alignContent	align-content	---
alignItems	align-items	---
columnGap	column-gap	space
display	display	---
flexDirection	flex-direction	---
flexWrap	flex-wrap	---
gap	gap	space
justifyContent	justify-content	---
justifyItems	justify-items	---
rowGap	row-gap	space

Flex Item

Flex item style props allow you to adjust the flex item styles of components.

import {Flex} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  minHeight: 'xl',
  minWidth: '2rem',
  padding: 'xs',
};

export default () => (
  <Flex flexDirection="column" rowGap="xs">
    <Flex columnGap="xs">
      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" flex={2} textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
    </Flex>
    <Flex columnGap="xs">
      <Flex.Item backgroundColor="cinnamon300" flex={2} textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
      <Flex.Item backgroundColor="sourLemon300" flex={1} textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" flex={2} textAlign="center" {...baseStyles}>
        2
      </Flex.Item>
    </Flex>
    <Flex columnGap="xs">
      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>
        1
      </Flex.Item>
    </Flex>
  </Flex>
);

Prop	CSS Properties	System
alignSelf	align-self	---
flex	flex	---
flexBasis	flex-basis	---
flexGrow	flex-grow	---
flexShrink	flex-shrink	---
justifySelf	justify-self	---
order	order	---

Grid

Grid style props allow you to adjust the grid styles of components.

import {Grid} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  padding: 'xs',
};

export default () => (
  <Grid
    gridGap="xs"
    gridTemplateAreas="'head head' 'nav main' 'nav foot'"
    gridTemplateColumns="1fr 3fr"
    gridTemplateRows="2.5rem minmax(10rem, auto) 2.5rem"
  >
    <Grid.Item gridArea="head" backgroundColor="cinnamon300" {...baseStyles} />
    <Grid.Item gridArea="nav" backgroundColor="sourLemon300" {...baseStyles} />
    <Grid.Item gridArea="main" backgroundColor="blueberry300" {...baseStyles} />
    <Grid.Item gridArea="foot" backgroundColor="cinnamon300" {...baseStyles} />
  </Grid>
);

Prop	CSS Properties	System
alignContent	align-content	---
alignItems	align-items	---
display	display	---
grid	grid	---
gridArea	grid-area	---
gridAutoColumns	grid-auto-columns	---
gridAutoFlow	grid-auto-flow	---
gridAutoRows	grid-auto-rows	---
gridColumnGap	grid-column-gap	space
gridGap	grid-gap	space
gridPlaceItems	grid-place-items	---
gridRowGap	grid-row-gap	space
gridTemplate	grid-template	---
gridTemplateAreas	grid-template-areas	---
gridTemplateColumns	grid-template-columns	---
gridTemplateRows	grid-template-rows	---
justifyContent	justify-content	---
justifyItems	justify-items	---

Grid Item

Grid item style props allow you to adjust the grid item styles of components.

import {Grid} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  padding: 'xs',
};

export default () => (
  <Grid
    gridGap="xs"
    gridTemplateColumns="1fr 3fr"
    gridTemplateRows="2.5rem minmax(10rem, auto) 2.5rem"
  >
    <Grid.Item gridColumn="1 / 3" gridRow="1" backgroundColor="cinnamon300" {...baseStyles} />
    <Grid.Item gridColumn="1" gridRow="2 / 4" backgroundColor="sourLemon300" {...baseStyles} />
    <Grid.Item gridColumn="2" gridRow="2" backgroundColor="blueberry300" {...baseStyles} />
    <Grid.Item gridColumn="2" gridRow="3" backgroundColor="cinnamon300" {...baseStyles} />
  </Grid>
);

Prop	CSS Properties	System
alignSelf	align-self	---
gridArea	grid-area	---
gridColumn	grid-column	---
gridColumnEnd	grid-column-end	---
gridColumnStart	grid-column-start	---
gridRow	grid-row	---
gridRowEnd	grid-row-end	---
gridRowStart	grid-row-start	---
justifySelf	justify-self	---
placeSelf	place-self	---

Layout

Layout style props allow you to adjust the layout styles of components.

40 x 80

64 x 80

80 x 80

import {Flex} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  margin: 'xxs',
  padding: 'xs',
  justifyContent: 'center',
  alignItems: 'flex-start',
};

export default () => (
  <Flex alignItems="flex-end">
    <Flex
      backgroundColor="cinnamon300"
      display="inline-flex"
      height="xl"
      width="xxxl"
      {...baseStyles}
    >
      40 x 80
    </Flex>
    <Flex
      backgroundColor="sourLemon300"
      display="inline-flex"
      height="xxl"
      width="xxxl"
      {...baseStyles}
    >
      64 x 80
    </Flex>
    <Flex
      backgroundColor="blueberry300"
      display="inline-flex"
      height="xxxl"
      width="xxxl"
      {...baseStyles}
    >
      80 x 80
    </Flex>
  </Flex>
);

Prop	CSS Properties	System
display	display	---
height	height	space
listStyle	list-style	---
maxHeight	max-height	space
maxWidth	max-width	space
minHeight	min-height	space
minWidth	min-width	space
overflow	overflow	---
overflowX	overflow-x	---
overflowY	overflow-y	---
verticalAlign	vertical-align	---
width	width	space

Other

Other style props allow you to adjust the other, miscellaneous styles of components.

Cursor Grab

Cursor Text

Cursor Wait

import {Box} from '@workday/canvas-kit-react/layout';
import {colors} from '@workday/canvas-kit-react/tokens';

const baseStyles = {
  color: 'blackPepper500',
  display: 'inline-block',
  margin: 'xxs',
  minHeight: 'xl',
  padding: 'xs',
};

export default () => (
  <Box>
    <Box
      backgroundColor="cinnamon300"
      cursor="grab"
      outline={`2px dashed ${colors.cinnamon300}`}
      outlineOffset="2px"
      {...baseStyles}
    >
      Cursor Grab
    </Box>
    <Box
      backgroundColor="sourLemon300"
      cursor="text"
      outline={`2px dashed ${colors.sourLemon300}`}
      outlineOffset="2px"
      {...baseStyles}
    >
      Cursor Text
    </Box>
    <Box
      backgroundColor="blueberry300"
      cursor="wait"
      outline={`2px dashed ${colors.blueberry300}`}
      outlineOffset="2px"
      {...baseStyles}
    >
      Cursor Wait
    </Box>
  </Box>
);

Prop	CSS Properties	System
animation	animation	---
appearance	appearance	---
boxSizing	box-sizing	---
content	content	---
cursor	cursor	---
fill	fill	---
float	float	---
objectFit	object-fit	---
objectPosition	object-position	---
outline	outline	---
outlineOffset	outline-offset	---
overflowWrap	overflow-wrap	---
pointerEvents	pointer-events	---
resize	resize	---
stroke	stroke	---
transform	transform	---
transition	transition	---
userSelect	user-select	---
visibility	visibility	---

Position

Position style props allow you to adjust the position styles of components.

Left

Center

Right

import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper500',
  margin: 'xxs',
  height: 'xl',
  width: '8rem',
  padding: 'xs',
};

export default () => {
  return (
    <div>
      <Box
        backgroundColor="cinnamon300"
        left={0}
        position="absolute"
        top="calc(50% - 20px)"
        zIndex={1}
        textAlign="center"
        {...baseStyles}
      >
        Left
      </Box>
      <Box
        backgroundColor="sourLemon300"
        left={`calc(50% - 4rem)`}
        position="absolute"
        top="calc(50% - 20px)"
        zIndex={2}
        textAlign="center"
        {...baseStyles}
      >
        Center
      </Box>
      <Box
        backgroundColor="blueberry300"
        position="absolute"
        right={0}
        top="calc(50% - 20px)"
        zIndex={3}
        textAlign="center"
        {...baseStyles}
      >
        Right
      </Box>
    </div>
  );
};

Prop	CSS Properties	System
bottom	bottom	---
inset	inset	---
insetInlineEnd	inset-inline-end	---
insetInlineStart	inset-inline-start	---
left	left	---
position	position	---
right	right	---
top	top	---
zIndex	z-index	---

Space

Space style props allow you to adjust the space styles of components.

Small

Medium

Large

import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  border: 'dotted 2px',
  color: 'blackPepper500',
  display: 'inline-block',
  verticalAlign: 'bottom',
};

export default () => (
  <div>
    <Box backgroundColor="cinnamon300" margin="xxs" padding="s" textAlign="center" {...baseStyles}>
      <Box border="dotted 2px" borderColor="blackPepper500">
        Small
      </Box>
    </Box>
    <Box backgroundColor="sourLemon300" margin="xxs" padding="m" textAlign="center" {...baseStyles}>
      <Box border="dotted 2px" borderColor="blackPepper500">
        Medium
      </Box>
    </Box>
    <Box backgroundColor="blueberry300" margin="xxs" padding="l" textAlign="center" {...baseStyles}>
      <Box border="dotted 2px" borderColor="blackPepper500">
        Large
      </Box>
    </Box>
  </div>
);

Prop	CSS Properties	System
margin	margin	space
marginBottom	margin-bottom	space
marginInlineEnd	margin-inline-end	space
marginInlineStart	margin-inline-start	space
marginLeft	margin-left	space
marginRight	margin-right	space
marginTop	margin-top	space
marginX	margin-inline	space
marginY	margin-block	space
padding	padding	space
paddingBottom	padding-bottom	space
paddingInlineEnd	padding-inline-end	space
paddingInlineStart	padding-inline-start	space
paddingLeft	padding-left	space
paddingRight	padding-right	space
paddingTop	padding-top	space
paddingX	padding-inline	space
paddingY	padding-block	space

Text

Text style props allow you to adjust the text styles of components.

The Elements of Typographic Style

"Typography is the craft of endowing human language with a durable visual form."

― Robert Bringhurst

import {Box} from '@workday/canvas-kit-react/layout';

export default () => (
  <Box padding="m" border="solid 4px" borderColor="blueberry300" color="blackPepper500">
    <Box as="h3" fontSize="large" fontWeight="bold" margin="zero">
      The Elements of Typographic Style
    </Box>
    <Box as="p" fontSize="medium" fontStyle="italic">
      "Typography is the craft of endowing human language with a durable visual form."
    </Box>
    <Box as="span" fontSize="small" fontWeight="bold" color="licorice300">
      ― Robert Bringhurst
    </Box>
  </Box>
);

Prop	CSS Properties	System
fontFamily	font-family	font
fontSize	font-size	fontSize
fontStyle	font-style	---
fontWeight	font-weight	fontWeight
letterSpacing	letter-spacing	---
lineHeight	line-height	---
textAlign	text-align	---
textDecoration	text-decoration	---
textOverflow	text-overflow	---
textShadow	text-shadow	---
textTransform	text-transform	---
whiteSpace	white-space	---
wordBreak	word-break	---

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.

FAQ Section

Style Props

Style props are deprecated!

System Prop Values

Background

Border

Color

Depth

Flex

Flex Item

Grid

Grid Item

Layout

Other

Position

Space

Text

The Elements of Typographic Style

Can't Find What You Need?

Resources

Guidelines

Workday