System props

System props are paired with values from Fuegokit's system theme values to apply custom styles to components.
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Systems props are deprecated. They should only be used in Fuegokit React's `Text` and `Box` components. Use a general rule, the sx prop when composing components Fuegokit React.

System props provide a shorthand way to change a component's style by passing styles as props.

They integrate with Fuegokit's design tokens and allow you to pass system theme values directly to components via system props:

Under the hood, Fuegokit React is using styled-system to manage system props.

System Prop Categories

CategoryCSS Properties
Margin and paddingmargin, 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,
TypographyfontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, fontStyle, whiteSpace,
Bordersborder, 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,
Layoutwidth, height, minWidth, minHeight, maxWidth, maxHeight, size, overflow, overflowX, overflowY, display, verticalAlign,
FlexboxalignItems, alignContent, justifyItems, justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis, justifySelf, alignSelf, order,
GridgridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea,

See also