Style Props

All primitive components accept the following props that will be converted into CSS using Emotion:

fontFamily, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, whiteSpace

fontSize: numeric values will be passed as an index to theme.fontSizes

backgroundColor, borderColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, fill, stroke: accept any valid color as well as theme colors.

display, width, height, minWidth, minHeight, maxWidth, maxHeight, overflow, overflowX, overflowY

position, top, right, bottom, left, zIndex

padding, paddingTop, paddingRight, paddingBottom, paddingLeft

margin, marginTop, marginRight, marginBottom, marginLeft

marginVertical: maps to margin-top, and margin-bottom

marginHorizontal: maps to margin-left, and margin-right

paddingHorizontal: maps to padding-left, and padding-right

paddingVertical: maps to padding-top, and padding-bottom

column: maps to grid-column

columnStart: maps to grid-column-start

columnEnd: maps to grid-column-end

row: maps to grid-row

rowStart: maps to grid-row-start

rowEnd: maps to grid-row-end

basis: maps to flex-basis

grow: maps to flex-grow

shrink: maps to flex-shrink

wrap: when set to true, it sets flex-wrap: wrap

visible: accepts true or false. Maps to display property.

elevation: accepts 0-4, 0 being the closest and 4 being the furthest. Inspired by Material Design.

radius: maps to borderRadius

radiusTop: maps to borderTopLeftRadius and borderTopRightRadius

radiusRight: maps to borderTopRightRadius and borderBottomRightRadius

radiusBottom: maps to borderBottomLeftRadius and borderBottomRightRadius

radiusLeft: maps to borderBottomLeftRadius and borderTopLeftRadius

uppercase: sets textTransform: uppercase

In addition to the props above, UI kit components also accept a css prop that can be used to create any valid CSS object styles. This is primarly used for one-off cases when needing to set nuanced CSS styles.

This library uses Emotion to power all style props and theming. Style props are inspired by jsxstyle and styled-system.

When passing a numeric value to lineHeight, layout, position, spacing, grid, or flexbox properties they will be multiplied by an internal spacing value of 8. Read more about 8-point grid and how it can help simplify UI development.