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.
Introduction
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 used styled-system to manage system props.
We don't recommend using system props. They are now deprecated and will be removed in a future release.
System Prop Categories
| Category | CSS Properties |
|---|---|
| Margin and padding | 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, |
| Typography | fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, fontStyle, whiteSpace, |
| Borders | 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, |
| Layout | width, height, minWidth, minHeight, maxWidth, maxHeight, size, overflow, overflowX, overflowY, display, verticalAlign, |
| Flexbox | alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis, justifySelf, alignSelf, order, |
| Grid | gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea, |