Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Margin Property

Controls margin for elements. Supports scaled values, custom values, directional control, and negative margins.

Margin of 4

import { Box, Text } from "@locus-ui/components";
<Box m="4" className="border">  <Text>Margin of 4</Text></Box>

View Source

Examples

Margin Scale

The m prop accepts scale values 0–8 and auto.
0
1
2
3
4
5
6
8
auto

margin-scale.tsx

import { Box, Text } from "@locus-ui/components";
const marginValues = [0, 1, 2, 3, 4, 5, 6, 8, "auto"];
return marginValues.map((num) => (  <Box key={num} className="border h-fit" m={`${num}`}>    {num}  </Box>));

Negative Margins

Margin supports negative values for overlapping layouts.
-8
-6
-5
-4
-3
-2
-1

negative-margin.tsx

import { Box, Text } from "@locus-ui/components";
const negativeMarginValues = [-8, -6, -5, -4, -3, -2, -1];
return negativeMarginValues.map((num) => (  <Box key={num} className="border h-fit" mb={`${num}`}>    {num}  </Box>));

Margin Directions

Use m, mt, mb, ml, mr, mx, and my for directional margin control.
m = 2
mt = 2
mb = 2
ml = 2
mr = 2
mx = 2
my = 2

margin-directions.tsx

import { Box, Text } from "@locus-ui/components";
<Box m="2" className="border">m = 2</Box><Box mt="2" className="border">mt = 2</Box><Box mb="2" className="border">mb = 2</Box><Box ml="2" className="border">ml = 2</Box><Box mr="2" className="border">mr = 2</Box><Box mx="2" className="border">mx = 2</Box><Box my="2" className="border">my = 2</Box>

Custom Margin

Margin also accepts custom CSS values.
m = 17px

custom-margin.tsx

import { Box, Text } from "@locus-ui/components";
<Box className="border w-fit" m="17px">  m = 17px</Box>