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 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