For Developers

Style Props

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

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
PropCSS PropertiesSystem
backgroundcolor
backgroundAttachment---
backgroundColorcolor
backgroundImage---
backgroundPosition---
backgroundRepeat---
backgroundSize---

Border

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

Cinnamon 300
Sour Lemon 300
Blueberry 300
PropCSS PropertiesSystem
border---
borderBottom---
borderBottomColorcolor
borderBottomLeftRadiusshape
borderBottomRightRadiusshape
borderBottomStyle---
borderBottomWidth---
borderCollapse---
borderColorcolor
borderInlineEnd---
borderInlineEndColorcolor
borderInlineEndStyle---
borderInlineEndWidth---
borderInlineStart---
borderInlineStartColorcolor
borderInlineStartStyle---
borderInlineStartWidth---
borderLeft---
borderLeftColorcolor
borderLeftStyle---
borderLeftWidth---
borderRadiusshape
borderRight---
borderRightColorcolor
borderRightStyle---
borderRightWidth---
borderSpacing---
borderStyle---
borderTop---
borderTopColorcolor
borderTopLeftRadiusshape
borderTopRightRadiusshape
borderTopStyle---
borderTopWidth---
borderWidth---

Color

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

Cinnamon 300
Sour Lemon 300
Blueberry 300
PropCSS PropertiesSystem
backgroundColorcolor
colorcolor
opacity---

Depth

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

Depth 1
Depth 2
Depth 3
PropCSS PropertiesSystem
boxShadow---
depthdepth

Flex

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

1
1
1
2
2
2
1
1
1
PropCSS PropertiesSystem
alignContent---
alignItems---
columnGapspace
display---
flexDirection---
flexWrap---
gapspace
justifyContent---
justifyItems---
rowGapspace

Flex Item

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

1
2
1
2
1
2
1
1
PropCSS PropertiesSystem
alignSelf---
flex---
flexBasis---
flexGrow---
flexShrink---
justifySelf---
order---

Grid

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

PropCSS PropertiesSystem
alignContent---
alignItems---
display---
grid---
gridArea---
gridAutoColumns---
gridAutoFlow---
gridAutoRows---
gridColumnGapspace
gridGapspace
gridPlaceItems---
gridRowGapspace
gridTemplate---
gridTemplateAreas---
gridTemplateColumns---
gridTemplateRows---
justifyContent---
justifyItems---

Grid Item

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

PropCSS PropertiesSystem
alignSelf---
gridArea---
gridColumn---
gridColumnEnd---
gridColumnStart---
gridRow---
gridRowEnd---
gridRowStart---
justifySelf---
placeSelf---

Layout

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

40 x 80
64 x 80
80 x 80
PropCSS PropertiesSystem
display---
heightspace
listStyle---
maxHeightspace
maxWidthspace
minHeightspace
minWidthspace
overflow---
overflowX---
overflowY---
verticalAlign---
widthspace

Other

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

Cursor Grab
Cursor Text
Cursor Wait
PropCSS PropertiesSystem
animation---
appearance---
boxSizing---
content---
cursor---
fill---
float---
objectFit---
objectPosition---
outline---
outlineOffset---
overflowWrap---
pointerEvents---
resize---
stroke---
transform---
transition---
userSelect---
visibility---

Position

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

Left
Center
Right
PropCSS PropertiesSystem
bottom---
inset---
insetInlineEnd---
insetInlineStart---
left---
position---
right---
top---
zIndex---

Space

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

Small
Medium
Large
PropCSS PropertiesSystem
marginspace
marginBottomspace
marginInlineEndspace
marginInlineStartspace
marginLeftspace
marginRightspace
marginTopspace
marginXspace
marginYspace
paddingspace
paddingBottomspace
paddingInlineEndspace
paddingInlineStartspace
paddingLeftspace
paddingRightspace
paddingTopspace
paddingXspace
paddingYspace

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
PropCSS PropertiesSystem
fontFamilyfont
fontSizefontSize
fontStyle---
fontWeightfontWeight
letterSpacing---
lineHeight---
textAlign---
textDecoration---
textOverflow---
textShadow---
textTransform---
whiteSpace---
wordBreak---

Can't Find What You Need?

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

FAQ Section