StylingSize

Size

Use size prop to control both the width and height of an element.

Name

Value

Pixels

 

2xs

xs

sm

md

lg

xl

3xl

0

10

12

16

20

24

32

40

48

56

64

80

224

384

1/2

1/3

1/4

2/3

2/4

3/4

auto

fit

full

max

min

#

Documentation

#

Usage

size=xs

size=sm

size=md

size=lg

size=xl

import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Flex alignItems="start" flexDirection="row" justifyContent="center">
        <Box size="xs">size=xs</Box>
        <Box size="sm">size=sm</Box>
        <Box size="md">size=md</Box>
        <Box size="lg">size=lg</Box>
        <Box size="xl">size=xl</Box>
      </Flex>
    </Canvas>
  );
}

#

Percentage

size=1/2

size=2/3

size=full

import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas p="8">
      <Flex>
        <Box size="1/2">size=1/2</Box>
        <Box size="2/3">size=2/3</Box>
        <Box size="full">size=full</Box>
      </Flex>
    </Canvas>
  );
}

#

Reset

size=auto

import { Box, Flex } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas p="8">
      <Flex>
        <Box size="auto">size=auto</Box>
      </Flex>
    </Canvas>
  );
}
Max-WidthWidth