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. |