Skip to Content
ComponentsBox

Box

Box is the base component for all our other components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.

#

Documentation

#

Using design tokens

This is a Box
import { Box } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box bg="bg.information.subtle" m="24" p="24" rounded="sm">
      This is a Box
    </Box>
  );
}

#

Composition

Box component uses the Radix Composition  approach and accepts an asChild prop. By default it renders a <div> element but when asChild is enabled it will forward all of its own props to its child and only render the child element instead.

I am a span 
import { Box } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [isHovered, setIsHovered] = useState(false);
 
  return (
    <Box
      asChild
      bg="bg.information.subtle"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      p="8"
      rounded="md"
    >
      <span>I am a span {isHovered && "hovered"}</span>
    </Box>
  );
}

#

BoxProps

We export a BoxProps generic type that can be used to define prop types for components that extend Box.

The first argument is the element or component type which defaults to div.

The second argument is any additional custom prop types that component accepts.

import { Box, type BoxProps, extractBoxProps } from "@optiaxiom/react";
import { forwardRef } from "react";
 
type ButtonProps = BoxProps<"button", { icon?: string }>;
 
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, icon, ...props }, ref) => {
    const { boxProps, restProps } = extractBoxProps(props);
 
    return (
      <Box asChild {...boxProps}>
        <button ref={ref} {...restProps}>
          {icon}
          {children}
        </button>
      </Box>
    );
  },
);
 
Button.displayName = "@optiaxiom/docs/Button";

#

Related

Flex

Use Flex component to stack items vertically or horizontally.

Grid

Use Grid component to place items in a grid using equal width columns.

Text

Display body or any other form of text. By default it outputs the <p> paragraph element.

#

Props

#

Box

Renders a <div> element.

Prop

alignItems

Set the element’s align-items CSS property

ResponsiveValue<"normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start">

alignSelf

Set the element’s align-self CSS property

ResponsiveValue<"normal" | "stretch" | "center" | "end" | "start">

animation

Animate element with CSS animations

typeof styling.animation

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

bg

Set the element’s background color

typeof theme.colors

border

Set the element’s border-width CSS property

typeof styling.border-width

borderB

Set the element’s border-bottom-width CSS property

typeof styling.border-width

borderColor

Set the element’s border-color CSS property

typeof theme.colors

borderL

Set the element’s border-left-width CSS property

typeof styling.border-width

borderR

Set the element’s border-right-width CSS property

typeof styling.border-width

borderT

Set the element’s border-top-width CSS property

typeof styling.border-width

className

string

color

Set the element’s text color

typeof theme.colors

cursor

Set the element’s cursor CSS property

"default" | "not-allowed" | "pointer" | "text"

display

Set the element’s display CSS property

ResponsiveValue<"flex" | "grid" | "none" | "block" | "inline" | "table" | "table-cell" | "table-row" | "inline-block" | "inline-flex">

empty

Toggle element visibility based on :empty pseudo-class

"hidden"

flex

Set the element’s flex CSS property

ResponsiveValue<"initial" | "none" | "auto" | "1">

flexDirection

Set the element’s flex-direction CSS property

ResponsiveValue<"column" | "column-reverse" | "row" | "row-reverse">

flexWrap

Set the element’s flex-wrap CSS property

ResponsiveValue<"nowrap" | "wrap">

fontFamily

Set the element’s font family

typeof theme.fontFamily

fontSize

Set the element’s font-size and line-height CSS properties

typeof theme.fontSize

fontWeight

Set the element’s font-weight CSS property

"inherit" | "400" | "500" | "600" | "700"

gap

Set the element’s gap CSS property

ResponsiveValue<typeof styling.gap>

gridColumn

Set the element’s size across grid columns

ResponsiveValue<"1" | "2" | "3" | "4">

gridTemplateColumns

Control number of columns in a grid layout

ResponsiveValue<"1" | "2" | "3" | "4">

h

Set the element’s height

ResponsiveValue<typeof theme.size>

justifyContent

Set the element’s justify-content CSS property

ResponsiveValue<"normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start">

justifyItems

Set the element’s justify-items CSS property

ResponsiveValue<"normal" | "stretch" | "center" | "end" | "start">

m

Set the element’s margin on all sides

typeof styling.margin

maxH

Set the element’s max-height

ResponsiveValue<typeof theme.size>

maxW

Set the element’s max-width

ResponsiveValue<typeof theme.size>

mb

Set the element’s bottom margin

typeof styling.margin

ml

Set the element’s left margin

typeof styling.margin

mr

Set the element’s right margin

typeof styling.margin

mt

Set the element’s top margin

typeof styling.margin

mx

Set the element’s left and right margin

typeof styling.margin

my

Set the element’s top and bottom margin

typeof styling.margin

objectFit

Set the element’s object-fit CSS property

"contain" | "fill" | "none" | "cover"

overflow

Set the element’s overflow CSS property

"auto" | "hidden" | "visible"

overflowX

Set the element’s overflow-x CSS property

"auto" | "hidden" | "visible"

overflowY

Set the element’s overflow-y CSS property

"auto" | "hidden" | "visible"

p

Set the element’s padding on all sides

typeof styling.padding

pb

Set the element’s bottom padding

typeof styling.padding

pl

Set the element’s left padding

typeof styling.padding

placeItems

Set the element’s place-items CSS property

ResponsiveValue<"center">

pointerEvents

Set the element’s pointer-events CSS property

"none" | "auto"

pr

Set the element’s right padding

typeof styling.padding

pt

Set the element’s top padding

typeof styling.padding

px

Set the element’s left and right padding

typeof styling.padding

py

Set the element’s top and bottom padding

typeof styling.padding

rounded

Set the element’s border radius on all corners

typeof theme.borderRadius

shadow

Set the element’s box shadow

typeof theme.boxShadow

size

Set the element’s width and height

ResponsiveValue<typeof theme.size>

textAlign

Set the element’s text-align CSS property

"center" | "end" | "start" | "justify"

textTransform

Set the element’s text-transform CSS property

"none" | "capitalize" | "uppercase"

transition

Control which CSS properties should transition

typeof styling.transition-property

w

Set the element’s width

ResponsiveValue<typeof theme.size>

whiteSpace

Set the element’s white-space CSS property

"nowrap"

z

Set the element’s stack order

typeof theme.zIndex

#

Changelog

#

0.1.0

  • Added component
Last updated on
Flex