Box

Component responsible for spacings and sizes 📐

import { Box } from '@semcore/ui/base-components';
<Box />;

BoxProps

& {...}

Name	Type	Description
display		CSS `display` property
inline	boolean	Sets the `inline-block` property
boxSizing	boolean | "border-box"	CSS `box-sizing: border-box` property
flex		CSS `flex` property
m	number | string	CSS `margin` property
mt	number | string	CSS `margin-top` property
mr	number | string	CSS `margin-right` property
mb	number | string	CSS `margin-bottom` property
ml	number | string	CSS `margin-left` property
mx	number | string	CSS `margin-left` and `margin-right` property
my	number | string	CSS `margin-top` and `margin-bottom` property
p	number | string	CSS `padding` property
pt	number | string	CSS `padding-top` property
pr	number | string	CSS `padding-right` property
pb	number | string	CSS `padding-bottom` property
pl	number | string	CSS `padding-left` property
px	number | string	CSS `padding-left` and `padding-right` property
py	number | string	CSS `padding-top` and `padding-bottom` property
w	number | string	CSS `width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
wMin	number | string	CSS `min-width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
wMax	number | string	CSS `max-width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
h	number | string	CSS `height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
hMin	number | string	CSS `min-height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
hMax	number | string	CSS `max-height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
scaleIndent	number	Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).
innerOutline	boolean	Flag for render outline inside box
invertOutline	boolean	Flag for render inverted outline
inAfterOutline	boolean	Flag for render outline in the ::after element
position		CSS `position` property
top	number | string	CSS `top` property
left	number | string	CSS `left` property
bottom	number | string	CSS `bottom` property
right	number | string	CSS `right` property
inset	string	CSS `inset` property
zIndex	number	CSS `z-index` property
textAlign		CSS `text-align` property
children		Box content
hoverCursor		Hover cursor

Flex

The layout building component is a wrapper over CSS-flex. It inherits all properties from Box.

import { Flex } from '@semcore/ui/base-components';
<Flex />;

FlexProps

& {...}

Name	Type	Description
inline	boolean	It manages the `inline-flex` property
reverse	boolean	Adds the `reverse` property to `flex-direction`
flexWrap	boolean	It manages the `flex-wrap` property
direction		It manages the `flex-direction` property
alignItems		It manages the `align-items` property
alignContent		It manages the `align-content` property
justifyContent		CSS `justify-content` property
gap		CSS `gap` property
rowGap		CSS `gap` property
columnGap		CSS `gap` property
scaleIndent	number	Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).