Skip to Content
Sponsor

Style 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.

Reference#

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

Margin and padding#

PropCSS PropertyTheme 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 PropertyTheme Key
colorcolorcolors
bg, backgroundbackgroundcolors
bgColorbackground-colorcolors
opacityopacitynone

Typography#

PropCSS PropertyTheme Key
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-alignnone
fontStylefont-stylenone
textTransformtext-transformnone
textDecorationtext-decorationnone

Layout, width and height#

PropCSS PropertyTheme Key
w, widthwidthsizes
h, heightheightsizes
minW, minWidthmin-widthsizes
maxW, maxWidthmax-widthsizes
minH, minHeightmin-heightsizes
maxH, maxHeightmax-heightsizes
d, displaydisplaynone
boxSizewidth, heightsizes
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox#

Note: Props in * will only work if you use the Flex component.

PropCSS PropertyTheme Key
alignItems, *alignalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContent, *justifyjustify-contentnone
flexWrap, *wrapflex-wrapnone
flexDirection, flexDir, *directionflex-directionnone
flexflexnone
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

Grid Layout#

Note: Props in * will only work if you use the Grid component.

PropCSS PropertyTheme Key
gridGap, *gapgrid-gapspace
gridRowGap, *rowGapgrid-row-gapspace
gridColumnGap, *columnGapgrid-column-gapspace
gridColumn, *columngrid-columnnone
gridRow, *rowgrid-rownone
gridArea, *areagrid-areanone
gridAutoFlow, *autoFlowgrid-auto-flownone
gridAutoRows, *autoRowsgrid-auto-rowsnone
gridAutoColumns, *autoColumnsgrid-auto-columnsnone
gridTemplateRows, *templateRowsgrid-template-rowsnone
gridTemplateColumns, *templateColumnsgrid-template-columnsnone
gridTemplateAreas, *templateAreasgrid-template-areasnone

Background#

PropCSS PropertyTheme Key
bg, backgroundbackgroundnone
bgImage, backgroundImagebackground-imagenone
bgSize, backgroundSizebackground-sizenone
bgPosition,backgroundPositionbackground-positionnone
bgRepeat,backgroundRepeatbackground-repeatnone
bgAttachment,backgroundAttachmentbackground-attachmentnone

Borders#

PropCSS PropertyTheme 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
borderXborder-left , border-rightborders
borderYborder-top , border-bottomborders

Border Radius#

PropCSS PropertyTheme 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 PropertyTheme Field
pos,positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow#

xs
sm
Base
md
lg
xl
2xl
Dark lg
Outline
Inner
Editable Example

Text with shadows

Editable Example
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows

Pseudo#

PropCSS PropertyTheme Field
_hover:hover,
[data-hover]
none
_active:active,
[data-active]
none
_focus:focus,
[data-focus]
none
_highlighted[data-highlighted]none
_focusWithin:focus-withinnone
_focusVisible:focus-visiblenone
_disabled[disabled],
[aria-disabled=true],
[data-disabled]
none
_readOnly[aria-readonly=true],
[readonly],
[data-readonly]
none
_before::beforenone
_after::afternone
_empty:emptynone
_expanded[aria-expanded=true],
[data-expanded]
none
_checked[aria-checked=true],
[data-checked]
none
_grabbed[aria-grabbed=true],
[data-grabbed]
none
_pressed[aria-pressed=true],
[data-pressed]
none
_invalid[aria-invalid=true],
[data-invalid]
none
_valid[data-valid],
[data-state=valid]
none
_loading[data-loading],
[aria-busy=true]
none
_selected[aria-selected=true],
[data-selected]
none
_hidden[hidden],
[data-hidden]
none
_autofill:-webkit-autofillnone
_even:nth-of-type(even)none
_odd:nth-of-type(odd)none
_first:first-of-typenone
_last:last-of-typenone
_notFirst:not(:first-of-type)none
_notLast:not(:last-of-type)none
_visited:visitednone
_activeLink[aria-current=page]none
_indeterminate:indeterminate,
[aria-checked=mixed],
[data-indeterminate]
none
_groupHover[role=group]:hover &,
[role=group][data-hover] &
none
_groupFocus[role=group]:focus &,
[role=group][data-focus] &
none
_groupActive[role=group]:active &,
[role=group][data-active] &
none
_groupDisabled[role=group]:disabled &,
[role=group][data-disabled] &
none
_groupInvalid[role=group][data-invalid] &none
_groupChecked[role=group][data-checked] &none
_placeholder::placeholdernone
_fullScreen:fullscreennone
_selection::selectionnone

Other Props#

Asides all the common style props listed above, all component will accept the following props:

PropCSS PropertyTheme Field
animationanimationnone
appearanceappearancenone
transformtransformnone
transformOrigintransform-originnone
visibilityvisibilitynone
whiteSpacewhite-spacenone
userSelectuser-selectnone
pointerEventspointer-eventsnone
wordBreakword-breaknone
overflowWrapoverflow-wrapnone
textOverflowtext-overflownone
boxSizingbox-sizingnone
cursorcursornone
resizeresizenone
transitiontransitionnone
objectFitobject-fitnone
objectPositionobject-positionnone
objectPositionobject-positionnone
floatfloatnone
fillfillcolors
strokestrokecolors
outlineoutlinenone

The as prop#

The as prop is a feature that all of our components that allows you to pass an HTML tag or component to be rendered.

For example, say you are using a Button component, and you need to make it a link instead. You can compose a and Button like this:

Hello
Editable Example

This allows you to use all of the Button props and all of the a props without having to wrap the Button in an a component.

Edit this page