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

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

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

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

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

Flex

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

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.

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.

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.

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

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

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

Prop	CSS Properties	System
bottom	bottom	---
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

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-left margin-right	space
marginY	margin-top margin-bottom	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-left padding-right	space
paddingY	padding-top padding-bottom	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

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.

FAQ Section

Introduction

For Designers

For Developers

Canvas Glossary

Frequently Asked Questions

Announcements

Upgrade Guides

Overview

Color

Depth

Motion

Shape

Space

Type

Overview

System Icons

Accent Icons

Applet Icons

Empty States

The Dub

Overview

Buttons

Containers

Indicators

Inputs

Layout

Navigation

Popups

Text

Overview

Calls to Action

Errors and Alerts

Forms

Loading

Notifications

Overflow

Overview

Language and Style

Numbers

UI Text

Voice and Tone

Overview

Accessibility Tree

Accessible Color

Accessible Forms

Alt-Text and Non-Text Content Labels

Keyboard Focus Management

Meaningful Page Structure

Overview

RTL and Bidi

For Developers

Style Props

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?