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
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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="start"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox size="xs">size=xs</DemoBox>
      <DemoBox size="sm">size=sm</DemoBox>
      <DemoBox size="md">size=md</DemoBox>
      <DemoBox size="lg">size=lg</DemoBox>
      <DemoBox size="xl">size=xl</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Group alignItems="center" flexDirection="column" gap="8">
      <Text
        color="fg.tertiary"
        fontFamily="mono"
        fontSize="md"
        fontWeight="600"
        textAlign="center"
      >
        {children}
      </Text>
      <Box bg="bg.avatar.purple" rounded="sm" {...props} />
    </Group>
  );
}

#

Percentage

size=1/2
size=2/3
size=full
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      flexDirection="column"
      gap="16"
      rounded="md"
      style={stripes}
      w="full"
    >
      <DemoBox size="1/2">size=1/2</DemoBox>
      <DemoBox size="2/3">size=2/3</DemoBox>
      <DemoBox size="full">size=full</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};

#

Reset

size=auto
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      flexDirection="column"
      gap="16"
      rounded="md"
      style={stripes}
      w="full"
    >
      <DemoBox size="auto">size=auto</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};
Last updated on
Max WidthWidth