System Props

Primer Components utilize what we call "system props" to apply a standard set of props to each component. Using styled-system, groups of props are automatically applied to each component. Most components get the COMMON set of props which give the component access to color and space props (margin, padding, color and background color). These groups correspond to the color and space functions from styled-system which can be referenced in the styled system table of style functions.

To check which system props each component includes, check the documentation for that component.

The as prop

All Primer Components have access to the as prop, provided by styled-components. We use the as prop to render a component with the styles of the passed component in as, but with the system props of the base component.

For example, if you wanted to add some flex utilities to the Text component, you could do:

Hello!

System Prop Categories

CategoryIncluded Propsstyled-system docs
COMMON
margin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, m, mt, mr, mb, ml, mx, my, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, p, pt, pr, pb, pl, px, py, color, backgroundColor, opacity, bg, display
styled-system core docs
TYPOGRAPHY
fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, fontStyle, whiteSpace
styled-system typography docs
BORDER
border, borderWidth, borderStyle, borderColor, borderRadius, borderTop, borderTopLeftRadius, borderTopRightRadius, borderRight, borderBottom, borderBottomLeftRadius, borderBottomRightRadius, borderLeft, borderX, borderY, borderTopWidth, borderTopColor, borderTopStyle, borderBottomWidth, borderBottomColor, borderBottomStyle, borderLeftWidth, borderLeftColor, borderLeftStyle, borderRightWidth, borderRightColor, borderRightStyle, boxShadow, textShadow
styled-system border docs
LAYOUT
width, height, minWidth, minHeight, maxWidth, maxHeight, size, overflow, overflowX, overflowY, display, verticalAlign
styled-system layout docs
styled-system misc docs
POSITION
position, zIndex, top, right, bottom, left
styled-system position docs
FLEX
alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis, justifySelf, alignSelf, order
styled-system flexbox docs
GRID
gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea
styled-system grid docs