Skip to main content

Style Props

Style props provide a way to set the styling of a component by simply passing props to it. It helps developers save time while maintaining readability of complex components.

Reference#

The sections below list the supported style props and their expected values.

Margin and padding#

// m="s" refers to the value of `theme.spacing["s"]`<Box m="s">Tomato</Box>
// pt="xl" refers to the value of `theme.spacing["xl"]`<Box pt="xl">Red</Box>
PropStylesheet propertyType
m, marginmarginPearlTheme['spacing']
mt, marginTopmarginTopPearlTheme['spacing']
mr, marginRightmarginRightPearlTheme['spacing']
mb, marginBottommarginBottomPearlTheme['spacing']
ml, marginLeftmarginLeftPearlTheme['spacing']
mx, marginHorizontalmarginHorizontalPearlTheme['spacing']
my, marginVerticalmarginVerticalPearlTheme['spacing']
ms, marginStartmarginStartPearlTheme['spacing']
me, marginEndmarginEndPearlTheme['spacing']
p, paddingpaddingPearlTheme['spacing']
pt, paddingToppaddingTopPearlTheme['spacing']
pr, paddingRightpaddingRightPearlTheme['spacing']
pb, paddingBottompaddingBottomPearlTheme['spacing']
pl, paddingLeftpaddingLeftPearlTheme['spacing']
px, paddingHorizontalpaddingHorizontalPearlTheme['spacing']
py, paddingVerticalpaddingVerticalPearlTheme['spacing']
ps, paddingStartpaddingStartPearlTheme['spacing']
pe, paddingEndpaddingEndPearlTheme['spacing']

Color and Background Color#

// bg="primary.500" refers to the value of `theme.palette["primary"]["500"]`<Box bg="primary.500">Primary Box</Box>
// The specified 'light' and 'dark' values get activated based on the current color mode of the theme<Box color={{ light: "neutral.200", dark: "primary.100" }}>Red</Box>
PropStylesheet propertyType
bg, backgroundColorbackgroundColorPearlTheme['palette']
colorcolorPearlTheme['palette']

Opacity and Visibility#

<Box opacity={0.3}>Translucent Box</Box>
<Box visible={false}>Hidden Box</Box>
PropStylesheet propertyType
opacityopacitynumber
visiblevisibleboolean

Layout#

<Box width="100%" height={200}>  Translucent Box</Box>
<Box width="100%" height={50} flex={1} flexDirection="row" justifyContent="space-between">  <Box width={20} height={50}>    1  </Box>  <Box w={50} h={30} maxHeight={50}>    2  </Box>  <Box w={30} maxW={40} height={50}>    3  </Box></Box>
PropStylesheet propertyType
w, widthwidthnumber | string
h, heightheightnumber | string
minW, minWidthminWidthnumber | string
maxW, maxWidthmaxWidthnumber | string
minH, minHeightminHeightnumber | string
maxH, maxHeightmaxHeightnumber | string
overflowoverflow'visible' | 'hidden' | 'scroll'
aspectRatioaspectRationumber
alignContentalignContent'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'
alignItemsalignItems'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
alignSelfalignSelf'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
justifyContentjustifyContent'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
flexflexnumber
flexBasisflexBasisnumber | string
flexDirectionflexDirection'row' | 'column' | 'row-reverse' | 'column-reverse'
flexGrowflexGrownumber
flexShrinkflexShrinknumber
flexWrapflexWrap'wrap' | 'nowrap' | 'wrap-reverse'

Position#

<Box  top={20}  alignItems="center"  justifyContent="center"  width="100%"  position="absolute">  Absolute box</Box>
PropStylesheet propertyType
positionposition'absolute' | 'relative'
toptopnumber | string
rightrightnumber | string
bottombottomnumber | string
leftleftnumber | string
startstartnumber | string
endendnumber | string
zIndexzIndexPearlTheme['zIndices']

Border#

// borderColor="tomato" refers to the value of `theme.palette["tomato"]`// borderRadius="l" refers to the value of `theme.borderRadii["l"]`<Box  backgroundColor="neutral.100"  width="40%"  height={200}  borderStyle="solid"  borderWidth={2}  borderColor="tomato"  borderRadius="l">  Absolute box</Box>
PropStylesheet propertyType
borderBottomWidthborderBottomWidthnumber
borderLeftWidthborderLeftWidthnumber
borderRightWidthborderRightWidthnumber
borderStyleborderStyle'solid' | 'dotted' | 'dashed'
borderTopWidthborderTopWidthnumber
borderStartWidthborderStartWidthnumber
borderEndWidthborderEndWidthnumber
borderWidthborderWidthnumber
borderColorborderColorPearlTheme['palette']
borderTopColorborderTopColorPearlTheme['palette']
borderRightColorborderRightColorPearlTheme['palette']
borderLeftColorborderLeftColorPearlTheme['palette']
borderBottomColorborderBottomColorPearlTheme['palette']
borderStartColorborderStartColorPearlTheme['palette']
borderEndColorborderEndColorPearlTheme['palette']
borderRadiusborderRadiusPearlTheme['borderRadii']
borderBottomLeftRadiusborderBottomLeftRadiusPearlTheme['borderRadii']
borderBottomRightRadiusborderBottomRightRadiusPearlTheme['borderRadii']
borderTopLeftRadiusborderTopLeftRadiusPearlTheme['borderRadii']
borderTopRightRadiusborderTopRightRadiusPearlTheme['borderRadii']
borderBottomStartRadiusborderBottomStartRadiusPearlTheme['borderRadii']
borderBottomEndRadiusborderBottomEndRadiusPearlTheme['borderRadii']
borderTopStartRadiusborderTopStartRadiusPearlTheme['borderRadii']
borderTopEndRadiusborderTopEndRadiusPearlTheme['borderRadii']

Typography#

// textShadowColor="blue" refers to the value of `theme.palette["blue"]`<Text  lineHeight={12}  textAlign="center"  textDecorationLine="underline"  textShadowColor="blue">  This is a demo text</Text>
PropStylesheet propertyType
fontFamilyfontFamilyPearlTheme['fonts']
fontSizefontSizePearlTheme['fontSizes']
fontWeightfontWeightPearlTheme['fontWeights']
letterSpacingletterSpacingPearlTheme['letterSpacings']
lineHeightlineHeightPearlTheme['lineHeights']
fontStylefontStyle'normal' | 'italic'
textAligntextAlign'auto' | 'left' | 'right' | 'center' | 'justify'
textDecorationLinetextDecorationLine'none' | 'underline' | 'line-through' | 'underline line-through'
textDecorationStyletextDecorationStyle'solid' | 'double' | 'dotted' | 'dashed'
textTransformtextTransform'none' | 'capitalize' | 'uppercase' | 'lowercase'
textShadowOffsettextShadowOffset{ width: number; height: number }
textShadowRadiustextShadowRadiusnumber
textShadowColortextShadowColorPearlTheme['palette']

Shadow#

// boxShadow="l" refers to the value of `theme.elevation["l"]`<Box boxShadow="l">Theme Shadow box</Box>
// shadowColor="neutral.800" refers to the value of `theme.palette["neutral"]["800"]`<Box  shadowOffset={{width: 20, height: 10}}  shadowColor="neutral.800"  shadowRadius={13}  shadowOpacity={0.7}>  Custom Shadow box</Box>
PropStylesheet propertyType
boxShadowshadowOffset + shadowOpacity + shadowRadius + elevation + shadowColorPearlTheme['elevation']
shadowColorshadowColorPearlTheme['palette']
shadowOffsetshadowOffset{ width: number; height: number }
shadowOpacityshadowOpacitynumber
shadowRadiusshadowRadiusnumber

Text Shadow#

// textShadowColor="primary.300" refers to the value of `theme.palette["primary"]["300"]`<Text  textShadowColor="primary.300"  textShadowOffset={{ width: 2, height: 5 }}  textShadowRadius={2}>  Text with some sweet shadow</Text>
PropStylesheet propertyType
shadowColorshadowColorPearlTheme['palette']
textShadowOffsettextShadowOffset{ width: number; height: number }
textShadowRadiustextShadowRadiusnumber