System Props

Rimble Components utilizes styled-system

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.

System props are reused across many different components. To keep the documentation easy to read, we are showing the shared props in a single place.

System Props Table

CategoryIncluded Propsstyled-system docs
color, space
styled-system core docs
fontFamily, fontSize, fontStyle, fontWeight, lineHeight, textAlign
styled-system typography docs
borders, borderColor, boxShadow, borderRadius
styled-system border docs
display, size, width, height, minWidth, minHeight, maxWidth, maxHeight, overflow, verticalAlign
styled-system layout docs

styled-system misc docs
position, zIndex, top, right, bottom, left
styled-system position docs
flexBasis, flexDirection, flexWrap, alignContent, alignItems, justifyContent, justifyItems, flex, justifySelf, alignSelf, order
styled-system flexbox docs

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.

System Props

On this Page