Bain Logo

Style Props

Jump to Props

Learn about how styling works with the ADAPT Design System.

Head's up! This page is mostly for Developers, but feel free to read on if you're interested...

Introduction

Style props are a way to alter the style of a component by passing props to it. It helps to save time by referencing a central theme - which is where most small pieces of style definitions live. The term "Design Tokens" is growing in the design/dev community, so if you've heard of this before, basically style props are how we hook in to the design tokens set in the theme file.

The ADAPT Design System uses a library called Styled System for this.

Example

Hello

In the above example, our Text component is having its CSS color property set via the color prop, and its value is refencing the theme's primary color value. The Button component is having its CSS margin-top property set by referencing the theme's space[2] value.

Instead of writing separate CSS, you apply these style props directly onto a component.

When using the ADAPT Design System, you may find that you're writing less and less CSS because most of the style props take care of what you need. See Card for a complex example.

Table of Contents: More Documentation

Creating your own components

When creating your own components, you can usually start with regular JSX using which ever semantic HTML makes sense. Once you know you need to style an element, you can then replace those elements with a Box.

If you need to write extra CSS for an element or to set styles for CSS pseudo selectors (like :hover, :before, :after, :not etc), you should create a styled component that extends the Box component. This way you can write CSS and still have access to the standard style props.

  1. Use the styled function from Emotion
  2. Extend Box from the core design system so you have all style props accessible.

css prop

If for some reason you cannot use Box but still need to style a component, use the css prop provided by Styled-System on any html tag.

Accessing the theme object in CSS

In this example, we want to use values from the theme object within our CSS to style the hover state. The @styled-system/theme-get package offers a getter function called themeGet which lets you get the theme from the AdaptThemeProvider context.

Style Props Reference

(This section thanks to Chakra-UI) The following sections show a list of every style prop and the properties within each group. To learn more about it, you can also check the Styled System docs:

Margin & 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 & background color

PropCSS PropertyTheme Key
colorcolorcolors
bg, backgroundColorbackground-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
widthwidthsizes
heightheightsizes
minWidthmin-widthsizes
maxWidthmax-widthsizes
minHeightmin-heightsizes
maxHeightmax-heightsizes
displaydisplaynone
sizewidth heightsizes
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox

Read more about <Flex /> here.

Note: Props in * will only work if you use display="flex".

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

Grid Layout

Read more about <Grid /> here.

Note: Props in * will only work if you use display="grid".

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
backgroundbackgroundnone
backgroundImagebackground-imagenone
backgroundSizebackground-sizenone
backgroundPositionbackground-positionnone
backgroundRepeatbackground-repeatnone
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

Position

PropCSS PropertyTheme Field
positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow

PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows

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
fillfillcolors
strokestrokecolors
outlineoutlinenone

The as prop

The as prop is a feature that all of our components get from Emotion. It allows you to pass a HTML tag or another component to an ADAPT Design System component to be rendered as the base tag of that component along with all it's styles and props.

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:

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.

Further Reading

Learn more about Styled-System and check out these other Design Systems build on the same concept:

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy