Version: 3.0.0-next.38

Utility Props

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Style Props#

The following table shows a list of every style prop and the properties within each group.

Margin and padding#


PropCSS EquivalentTheme Key
m, marginmarginspace
mt, marginTopmargin-topspace
mr, marginRightmargin-rightspace
mb, marginBottommargin-bottomspace
ml, marginLeftmargin-leftspace
mxmargin-left and margin-rightspace
mymargin-top and margin-bottomspace
p, paddingpaddingspace
pt, paddingToppadding-topspace
pr, paddingRightpadding-rightspace
pb, paddingBottompadding-bottomspace
pl, paddingLeftpadding-leftspace
pxpadding-left and padding-rightspace
pypadding-top and padding-bottomspace

Color and background color#


PropCSS EqquivalentTheme Key
colorcolorcolors
bg, backgroundbackgroundcolors
bgColorbackground-colorcolors
opacityopacity-

Typography#


PropCSS EqquivalentTheme Key
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-align-
fontStylefont-style-
textTransformtext-transform-
textDecorationtext-decoration-

Layout, width and height#


PropCSS EqquivalentTheme Key
w, widthwidthsizes
h, heightheightsizes
minW, minWidthmin-widthsizes
maxW, maxWidthmax-widthsizes
minH, minHeightmin-heightsizes
maxH, maxHeightmax-heightsizes
d, displaydisplay-
boxSizewidth, heightsizes
verticalAlignvertical-align-
overflowoverflow-
overflowXoverflowX-
overflowYoverflowY-

Flexbox#


PropCSS EqquivalentTheme Key
alignItems, *alignalign-items-
alignContentalign-content-
justifyItemsjustify-items-
justifyContent, *justifyjustify-content-
flexWrap, *wrapflex-wrap-
flexDirection, flexDir, *directionflex-direction-
flexflex-
flexGrowflex-grow-
flexShrinkflex-shrink-
flexBasisflex-basis-
justifySelfjustify-self-
alignSelfalign-self-
orderorder-

Borders#


PropCSS EququivalentTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderRightborder-rightborders
borderRightWidthborder-right-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderRightColorborder-right-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderLeftborder-leftborders
borderLeftWidthborder-left-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderLeftColorborder-left-colorcolors

Borders Radius#


PropCSS EququivalentTheme Field
borderRadiusborder-radiusradii
borderTopLeftRadiusborder-top-left-radiusradii
borderTopRightRadiusborder-top-right-radiusradii
borderBottomRightRadiusborder-bottom-right-radiusradii
borderBottomLeftRadiusborder-bottom-left-radiusradii
borderTopRadiusborder-top-left-radius & border-top-right-radiusradii
borderRightRadiusborder-top-right-radius & border-bottom-right-radiusradii
borderBottomRadiusborder-bottom-left-radius & border-bottom-right-radiusradii
borderLeftRadiusborder-top-left-radius & border-bottom-left-radiusradii

Position#


PropCSS EquivalentTheme Field
pos,positionposition-
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow#


PropCSS EquivalentTheme Field
shadowbox-shadowshadows

Underscore Props#

Internal Props#

Provides a way to pass props to child components inside Composite componets.


PropTypeDescription
_stackIStackPropsPassed props will be provided to Stack child.
_textITextPropsPassed props will be provided to Text child.

Interaction Props#

Provides a way to pass props on certain interaction.


PropTypeDescription
_disabledSame as the componentPassed props will be applied on disabled state.
_focusSame as the componentPassed props will be applied on focused state.
_hoverSame as the componentPassed props will be applied on hovered state.
_invalidSame as the componentPassed props will be applied on invalid state.
_pressedSame as the componentPassed props will be applied on pressed state.

Platform Props#

Provides a way to pass props bassed on Platform (android, ios or web).


PropTypeDescription
_androidSame as the componentPassed props will be applied on android.
_iosSame as the componentPassed props will be applied on ios.
_webSame as the componentPassed props will be applied on web.