System Props

@bristlecone/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.

Below are the category of system props. To check which system props each component includes, check the documentation for that component.

System Prop Categories

CategoryIncluded Propsstyled-system docs
COMMONcolor, backgroundColor, bg, margin, m, marginTop, mt, marginBottom, mb, marginLeft, ml, marginRight, mr, padding, p, paddingTop, pt, paddingBottom, pb, paddingLeft, pl, paddingRight, prstyled-system core docs
TYPOGRAPHYfontFamily, fontSize, fontWeight, lineHeight, textAlign, textShadowstyled-system typography docs
LAYOUTdisplay, width, height, minWidth, minHeight, maxWidth, maxHeight, overflow, overflowX, overflowY, verticalAlignstyled-system layout docs
styled-system misc docs
POSITIONposition, zIndex, top, right, bottom, leftstyled-system position docs
FLEX_CONTAINERflexBasis, flexDirection, flexWrap, alignContent, alignItems, justifyContent, justifyItems, orderstyled-system flexbox docs
FLEX_ITEMflex, justifySelf, alignSelf, flexGrow, flexShrinkstyled-system flexbox docs