Prop aliases

What is a "prop alias"?

Prop alias is a prop name shorthand that compiles into a single or multiple CSS properties.

This feature is designed for convenience and development speed. These props can be assigned to any component exposed by the library, including the area components generated from your composition template strings.

Values of prop aliases can be applied conditionally. See Responsive props.

Each prop alias is associated with a single, or multiple corresponding CSS properties. See the list of all aliases and the corresponding CSS properties in the tables below.

Grid

Prop name	CSS property
areas	grid-template-areas
template	grid-template-areas
templateCols	grid-template-columns
templateRows	grid-template-rows
gap	grid-gap
gapCol	grid-column-gap
gapRow	grid-row-gap
col	grid-column
colStart	grid-column-start
colEnd	grid-column-end
row	grid-row
rowStart	grid-row-start
rowEnd	grid-row-end
autoRows	grid-auto-rows
autoCols	grid-auto-columns
autoFlow	grid-auto-flow

Alignment

Prop name	CSS property
order	order
flexDirection	flex-direction
flexShrink	flex-shrink
flexGrow	flex-grow
flexWrap	flex-wrap
align	align-self
alignItems	align-items
alignContent	align-content
justify	justify-self
justifyItems	justify-items
justifyContent	justify-content
place	place
placeItems	place-items
placeContent	place-content

Dimensions

Prop name	CSS property
minHeight	min-height
maxHeight	max-height
height	height
minWidth	min-width
maxWidth	max-width
width	width

Spacing

Prop name	CSS property
margin	margin
marginVertical	margin-top and margin-bottom
marginHorizontal	margin-right and margin-left
marginTop	margin-top
marginRight	margin-right
marginBottom	margin-bottom
marginLeft	margin-left
padding	padding
paddingVertical	padding-top and padding-bottom
paddingHorizontal	padding-right and padding-left
paddingTop	padding-top
paddingRight	padding-right
paddingBottom	padding-bottom
paddingLeft	padding-left