Import
System Props
The component mentioned in this page is wrapped with a withModSystemProps HOC and therefore, the following props can be applied to this component. Note that some of these props may have no effect on this component.
Name | Type | Default | Description |
---|---|---|---|
alignItems | string | - | Controls the alignment of items. |
bgColor | "primary" "secondary" "main" "success" "error" "light" "dark" "transparent" | - | Applies background color to the component based on the colors defined in the theme. |
bottom | number | - | Applies bottom spacing to the component. |
border | "primary" "success" "error" "light" "dark" "none" | - | Applies border to the component based on the borders defined in the theme. |
borderTop | "primary" "success" "error" "light" "dark" "none" | - | Applies top border to the component based on the borders defined in the theme. |
borderRight | "primary" "success" "error" "light" "dark" "none" | - | Applies right border to the component based on the borders defined in the theme. |
borderBottom | "primary" "success" "error" "light" "dark" "none" | - | Applies bottom border to the component based on the borders defined in the theme. |
borderLeft | "primary" "success" "error" "light" "dark" "none" | - | Applies left border to the component based on the borders defined in the theme. |
borderX | "primary" "success" "error" "light" "dark" "none" | - | Applies left and right border to the component based on the borders defined in the theme. |
borderY | "primary" "success" "error" "light" "dark" "none" | - | Applies top and bottom border to the component based on the borders defined in the theme. |
borderRadius | number | - | Applies border radius to the component. |
color | "primary" "secondary" "main" "success" "error" "light" "dark" "white" | - | Applies color to the text inside this component based on the colors defined in the theme. |
display | string | - | Controls how the component should be displayed. |
elevation | "light" "normal" "heavy" "none" | - | Applies shadow to the component based on the elevation defined in the theme. |
flexWrap | string | - | Controls whether the flex items are forced onto one line or can wrap onto multiple lines. |
float | string | - | Controls whether the items are placed to the right or left of its container. |
fs | number | - | Applies font-size in rem unit to the text inside of this component. |
fw | number | - | Applies font-weight to the text inside of this component. |
gap | number | - | Applies gaps/gutters between rows and columns. |
height | string | - | Applies height to the component. |
justifyContent | string | - | Applies justify-content CSS property to the component. |
left | number | - | Applies left spacing to the component. |
m | number | - | Applies margin in px to the component. |
mt | number | - | Applies top margin in px to the component. |
mr | number | - | Applies right margin in px to the component. |
mb | number | - | Applies bottom margin in px to the component. |
ml | number | - | Applies left margin in px to the component. |
mx | number | - | Applies right and left margin in px to the component. |
my | number | - | Applies top and bottom margin in px to the component. |
p | number | - | Applies padding in px to the component. |
pt | number | - | Applies top padding in px to the component. |
pr | number | - | Applies right padding in px to the component. |
pb | number | - | Applies bottom padding in px to the component. |
pl | number | - | Applies left padding in px to the component. |
px | number | - | Applies right and left padding in px to the component. |
py | number | - | Applies top and bottom padding in px to the component. |
position | string | - | Controls the position of the component. |
right | number | - | Applies right spacing to the component. |
textTransform | string | - | Applies text-transform CSS property to the text inside this component. |
textAlign | string | - | Applies text-align CSS property to the text inside this component. |
top | number | - | Applies top spacing to the component. |
width | string | - | Applies width to the component. |