System Props

System props are deprecated in all components except Box and Text. Please use the sx prop instead.

Primer React 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 React 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:

<Text as={Flex}>Hello!</Text>

<Text as={Flex}>Hello!</Text>

System Prop Categories

Category	Included Props	styled-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

Edit this page on GitHub

System Props

The as prop

System Prop Categories

The `as` prop