Skip to Content
StylingSize

Size

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

Name

Styles

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
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>
  );
}
Last updated on
Max-WidthWidth