Style Props

Style props are a way to alter the style of a component by simply passing props to it.

Palette

Here you can see the default palette values.

Name	Alias	CSS equivalent	Scale
`color`		`color`	`palette`
`backgroundColor`	`bg, bgColor, background`	`background-color`	`palette`
`borderColor`	`border`	`border-color`	`palette`
`borderBottomColor`		`border-bottom-color`	`palette`
`borderLeftColor`		`border-left-color`	`palette`
`borderRightColor`		`border-right-color`	`palette`
`borderTopColor`		`border-top-color`	`palette`
`tintColor`		`tint-color`	`palette`

Name	Alias	CSS equivalent
`height`		`height`
`width`		`width`

Here you can see the default border widths.

Name	CSS equivalent	Scale
`borderBottomWidth`	`border-bottom-width`	`borderWidths`
`borderLeftWidt`	`border-left-width`	`borderWidths`
`borderRightWidth`	`border-right-width`	`borderWidths`
`borderTopWidth`	`border-top-width`	`borderWidths`
`borderWidth`	`border-width`	`borderWidths`

Here you can see the default radius values.

Name	Alias	CSS equivalent	Scale
`borderRadius`	`rounded`	`border-radius`	`radius`
`borderTopLeftRadius`	`roundedTopLeft`	`border-top-left-radius`	`radius`
`borderTopRightRadius`	`roundedTopRight`	`border-top-right-radius`	`radius`
`borderBottomLeftRadius`	`roundedBottomLeft`	`border-bottom-left-radius`	`radius`
`borderBottomRightRadius`	`roundedBottomRight`	`border-bottom-right-radius`	`radius`

Here you can see the default spacing values.

Name	Alias	CSS equivalent	Scale
`gap`		`gap`	`spacings`
`margin`	`m`	`margin`	`spacings`
`marginBottom`	`mb`	`margin-bottom`	`spacings`
`marginLeft`	`ml`	`margin-left`	`spacings`
`marginRight`	`mr`	`margin-right`	`spacings`
`marginTop`	`mt`	`margin-top`	`spacings`
`marginX`	`mx`	`margin-left` and `margin-right`	`spacings`
`marginY`	`my`	`margin-top` and `margin-bottom`	`spacings`
`padding`	`p`	`padding`	`spacings`
`paddingBottom`	`pb`	`padding-bottom`	`spacings`
`paddingLeft`	`pl`	`padding-left`	`spacings`
`paddingRight`	`pr`	`padding-right`	`spacings`
`paddingTop`	`pt`	`padding-top`	`spacings`
`paddingX`	`px`	`padding-left` and `padding-right`	`spacings`
`paddingY`	`py`	`padding-top` and `padding-bottom`	`spacings`

Here you can see the default typography values.

Name	Alias	CSS equivalent	Scale
`lineHeight`		`line-height`	`lineHeights`
`letterSpacing`		`letter-spacing`	`letterSpacings`
`font`		`font-family`	`fonts`
`fontSize`		`font-size`	`fontSizes`
`fontStyle`		`font-style`
`fontWeight`		`font-weight`	`fontWeights`
`textAlign`		`text-align`
`textDecoration`	`txtDecor`	`text-decoration`
`textTransform`		`text-transform`