Box

The Box component serves as a wrapper component for most of the CSS utility needs. It allows you to control styling using style props to build a variety of components.

Dark Mode

Box

Tonic UI

Import

copy
import { Box } from '@trendmicro/react-styled-ui';
import { Box } from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
<Box
  backgroundColor="blue:50"
  color="black:primary"
  display="inline-block"
  px="4x"
  py="3x"
  fontSize="xl"
  lineHeight="xl"
>
  My component
</Box>
<Box
  backgroundColor="blue:50"
  color="black:primary"
  display="inline-block"
  px="4x"
  py="3x"
  fontSize="xl"
  lineHeight="xl"
>
  My component
</Box>

The as prop and custom component

By default, the Box component renders a div element. There might be cases where you want to render a different element, you can use the as prop to do that.

EDITABLE EXAMPLE
copy
<Box
  as="button"
  backgroundColor="blue:70"
  color="white:primary"
  border="none"
  borderRadius="sm"
  cursor="pointer"
  px="2x"
  py="1x"
>
  Button
</Box>
<Box
  as="button"
  backgroundColor="blue:70"
  color="white:primary"
  border="none"
  borderRadius="sm"
  cursor="pointer"
  px="2x"
  py="1x"
>
  Button
</Box>

Using pseudo props

Box also provides useful props to style common CSS pseudo-class and pseudo-element selectors.

A pseudo-class selector targets elements depending on their state rather than on information from the document tree. For example, the selector :hover matches when the user interacts with an element with a pointing device, but does not necessary activate it.

A pseudo-element selector applies styles to parts of your document content in scenarios where there isn't a specific HTML element to select. For example, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property.

:hover

Add the _hover prop to apply style props on hover.

EDITABLE EXAMPLE
copy
<Box
  as="button"
  bg="blue:40"
  color="white:primary"
  py="2x"
  px="3x"
  border={0}
  borderRadius="sm"
  cursor="pointer"
  _hover={{
    bg: 'blue:50',
    color: 'white:primary',
  }}
>
  Hover Me
</Box>
<Box
  as="button"
  bg="blue:40"
  color="white:primary"
  py="2x"
  px="3x"
  border={0}
  borderRadius="sm"
  cursor="pointer"
  _hover={{
    bg: 'blue:50',
    color: 'white:primary',
  }}
>
  Hover Me
</Box>

:active

Add the _active prop to apply style props on active.

EDITABLE EXAMPLE
copy
<Box
  as="button"
  bg="blue:40"
  color="white:primary"
  py="2x"
  px="3x"
  border={0}
  borderRadius="sm"
  cursor="pointer"
  _hover={{
    bg: 'blue:50',
    color: 'white:primary',
  }}
  _active={{
    bg: 'blue:60',
    color: 'white:primary',
  }}
>
  Click Me
</Box>
<Box
  as="button"
  bg="blue:40"
  color="white:primary"
  py="2x"
  px="3x"
  border={0}
  borderRadius="sm"
  cursor="pointer"
  _hover={{
    bg: 'blue:50',
    color: 'white:primary',
  }}
  _active={{
    bg: 'blue:60',
    color: 'white:primary',
  }}
>
  Click Me
</Box>

:focus

Add the _focus prop to apply style props on focus.

EDITABLE EXAMPLE
copy
<Box
  as="input"
  placeholder="Click Me"
  py="2x"
  px="3x"
  bg="gray:20"
  border={1}
  borderColor="transparent"
  borderRadius="sm"
  outline="none"
  _focus={{
    bg: 'white:primary',
    boxShadow: '0 0 0 .2rem rgba(111, 155, 244, .5)',
  }}
/>
<Box
  as="input"
  placeholder="Click Me"
  py="2x"
  px="3x"
  bg="gray:20"
  border={1}
  borderColor="transparent"
  borderRadius="sm"
  outline="none"
  _focus={{
    bg: 'white:primary',
    boxShadow: '0 0 0 .2rem rgba(111, 155, 244, .5)',
  }}
/>

:disabled

Add the _disabled prop to style an element which is disabled.

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing=".5rem">
  <Box
    as="button"
    bg="blue:40"
    color="white:primary"
    py="2x"
    px="3x"
    border={0}
    borderRadius="sm"
    cursor="pointer"
    _hover={{
      bg: 'blue:50',
      color: 'white:primary',
    }}
    _active={{
      bg: 'blue:60',
      color: 'white:primary',
    }}
  >
    Click Me
  </Box>
  <Box
    as="button"
    bg="blue:40"
    color="white:primary"
    py="2x"
    px="3x"
    border={0}
    borderRadius="sm"
    cursor="pointer"
    disabled
    _disabled={{
      cursor: 'not-allowed',
      bg: 'blue:40',
      color: 'white:primary',
      opacity: .6,
    }}
    _hover={{
      bg: 'blue:50',
      color: 'white:primary',
    }}
    _active={{
      bg: 'blue:60',
      color: 'white:primary',
    }}
  >
    Click Me
  </Box>
</Stack>
<Stack direction="row" spacing=".5rem">
  <Box
    as="button"
    bg="blue:40"
    color="white:primary"
    py="2x"
    px="3x"
    border={0}
    borderRadius="sm"
    cursor="pointer"
    _hover={{
      bg: 'blue:50',
      color: 'white:primary',
    }}
    _active={{
      bg: 'blue:60',
      color: 'white:primary',
    }}
  >
    Click Me
  </Box>
  <Box
    as="button"
    bg="blue:40"
    color="white:primary"
    py="2x"
    px="3x"
    border={0}
    borderRadius="sm"
    cursor="pointer"
    disabled
    _disabled={{
      cursor: 'not-allowed',
      bg: 'blue:40',
      color: 'white:primary',
      opacity: .6,
    }}
    _hover={{
      bg: 'blue:50',
      color: 'white:primary',
    }}
    _active={{
      bg: 'blue:60',
      color: 'white:primary',
    }}
  >
    Click Me
  </Box>
</Stack>

:visited

Add the _visited prop to style a visited link.

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing=".5rem">
  <Box
    as="a"
    href=""
    color="blue:40"
    fontWeight="semibold"
    textDecoration="none"
    _hover={{
      textDecoration: 'underline',
    }}
  >
    Normal link
  </Box>
  <Box
    as="a"
    href=""
    color="blue:40"
    fontWeight="semibold"
    textDecoration="none"
    _hover={{
      textDecoration: 'underline',
    }}
    _visited={{
      color: 'purple:60',
    }}
  >
    Visited link
  </Box>
</Stack>
<Stack direction="row" spacing=".5rem">
  <Box
    as="a"
    href=""
    color="blue:40"
    fontWeight="semibold"
    textDecoration="none"
    _hover={{
      textDecoration: 'underline',
    }}
  >
    Normal link
  </Box>
  <Box
    as="a"
    href=""
    color="blue:40"
    fontWeight="semibold"
    textDecoration="none"
    _hover={{
      textDecoration: 'underline',
    }}
    _visited={{
      color: 'purple:60',
    }}
  >
    Visited link
  </Box>
</Stack>

:first-child

Add the _firstChild prop to style an element that is the first element among its siblings.

EDITABLE EXAMPLE
copy
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          borderTop={1}
          borderTopColor={borderColor}
          _firstChild={{
            borderTopWidth: 0,
            bg: 'blue:40',
            color: 'white:primary',
          }}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          borderTop={1}
          borderTopColor={borderColor}
          _firstChild={{
            borderTopWidth: 0,
            bg: 'blue:40',
            color: 'white:primary',
          }}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}

:last-child

Add the _lastChild prop to style an element that is the last element among its siblings.

EDITABLE EXAMPLE
copy
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          borderBottom={1}
          borderBottomColor={borderColor}
          _lastChild={{
            borderBottomWidth: 0,
            bg: 'blue:40',
            color: 'white:primary',
          }}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          borderBottom={1}
          borderBottomColor={borderColor}
          _lastChild={{
            borderBottomWidth: 0,
            bg: 'blue:40',
            color: 'white:primary',
          }}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}

:nth-of-type()

Add the _nthOfType prop to match elements of a given type, based on their position among a group of siblings. The value can be represented as an array or an object in the following form:

copy
// array
_nthOfType={['2n+1', { color: 'red:40' }]

// object
_nthOfType={{ '2n+1': { color: 'red:40' }}
// array
_nthOfType={['2n+1', { color: 'red:40' }]

// object
_nthOfType={{ '2n+1': { color: 'red:40' }}

EDITABLE EXAMPLE
copy
const Paragraph = (props) => (
  <Box
    as="p"
    _nthOfType={{
      '1': {
        fontWeight: 'bold'
      },
      '2n+1': {
        color: 'red:40',
      },
      '2n': {
        color: 'blue:40',
      }
    }}
    {...props}
  />
);

function Example() {
  return (
    <>
      <Box>This element isn't counted.</Box>
      <Paragraph>1st paragraph.</Paragraph>
      <Paragraph>2nd paragraph.</Paragraph>
      <Box>This element isn't counted.</Box>
      <Paragraph>3rd paragraph.</Paragraph>
      <Paragraph>4th paragraph.</Paragraph>
    </>
  )
}

render(<Example />);
const Paragraph = (props) => (
  <Box
    as="p"
    _nthOfType={{
      '1': {
        fontWeight: 'bold'
      },
      '2n+1': {
        color: 'red:40',
      },
      '2n': {
        color: 'blue:40',
      }
    }}
    {...props}
  />
);

function Example() {
  return (
    <>
      <Box>This element isn't counted.</Box>
      <Paragraph>1st paragraph.</Paragraph>
      <Paragraph>2nd paragraph.</Paragraph>
      <Box>This element isn't counted.</Box>
      <Paragraph>3rd paragraph.</Paragraph>
      <Paragraph>4th paragraph.</Paragraph>
    </>
  )
}

render(<Example />);

:nth-of-type(odd)

EDITABLE EXAMPLE
copy
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three', 'Four', 'Five'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          _nthOfType={['odd', {
            bg: 'blue:40',
            color: 'white:primary',
          }]}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three', 'Four', 'Five'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          _nthOfType={['odd', {
            bg: 'blue:40',
            color: 'white:primary',
          }]}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}

:nth-of-type(even)

EDITABLE EXAMPLE
copy
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three', 'Four', 'Five'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          _nthOfType={['even', {
            bg: 'blue:40',
            color: 'white:primary',
          }]}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}
function Example() {
  const [colorMode] = useColorMode();
  const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20';

  return (
    <Box border={1} borderColor={borderColor} borderRadius="sm">
      {['One', 'Two', 'Three', 'Four', 'Five'].map(item => (
        <Box
          key={item}
          py="2x"
          px="3x"
          _nthOfType={['even', {
            bg: 'blue:40',
            color: 'white:primary',
          }]}
        >
          {item}
        </Box>
      ))}
    </Box>
  );
}

Examples

Let's take a look at some examples of how to use Box to style elements.

Responsive layout

EDITABLE EXAMPLE
copy
const Ellipsis = (props) => (
  <Box whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" {...props} />
);

const Light = ({ on, ...rest }) => (
  <Box
    display="inline-block"
    borderRadius="50%"
    bg={on ? '#00ff00' : '#666'}
    boxShadow={on ? '0 0 1px 2px rgba(0, 255, 0, .8)' : 'none'}
    height={16}
    width={16}
    verticalAlign="middle"
    {...rest}
  />
);

function Example() {
  const laneColor = {
    1: '#389efc',
    2: '#ff7332',
    3: '#00b449',
    4: '#fdf133',
    5: '#fc74cf',
  };

  const players = [
    { id: '240', lane: 1, name: 'Taiwan Leave System', laps: 2, raceTime: '01:20.592', gates: [1, 1, 1] },
    { id: '339', lane: 2, name: '404 Not Found', laps: 2, raceTime: '01:24.036', gates: [1, 1, 1] },
    { id: '003', lane: 3, name: 'ShowMeThe$$', laps: 2, raceTime: '01:37.890', gates: [1, 1, 0] },
    { id: '207', lane: 4, name: 'Dragon Rider', laps: 1, raceTime: '00:49.211', gates: [1, 1, 0] },
    { id: '456', lane: 5, name: 'BumbleBee', laps: 0, raceTime: '00:00.000', gates: [1, 1, 1] },
  ];

  return (
    <Box position="relative" mx="auto">
      {players.map((player, index) => (
        <Box
          key={player.id}
          display="flex"
          minWidth={360}
        >
          <Box
            flexBasis="auto"
            flexGrow={0}
            minWidth=".5rem"
            width=".5rem"
            bg={laneColor[player.lane]}
          />
          <Box
            bg={index % 2 ? 'gray:100' : 'gray:80'}
            color="white:primary"
            flexBasis={0}
            flexGrow={1}
            maxWidth="calc(100% - .5rem)"
            py="2x"
            px="6x"
          >
            <Box
              display="flex"
              alignItems="flex-end"
            >
              <Box
                flexBasis={0}
                flexGrow={1}
                maxWidth="100%"
              >
                <Text
                  color="#6fffff"
                  fontWeight="bold"
                  fontSize={['4xl', null, null, 48]}
                  lineHeights={['4xl', null, null, '1.5']}
                >
                  {player.id}
                </Text>
              </Box>
              <Box
                flexBasis="auto"
                flexGrow={0}
                width="auto"
              >
                <Text
                  fontSize={['3xl', null, null, '4xl']}
                  lineHeight={['3xl', null, null, '4xl']}
                >
                  {player.laps} / {player.raceTime}
                </Text>
              </Box>
            </Box>
            <Box
              display="flex"
              alignItems="center"
              pt="2x"
            >
              <Box
                flexBasis={0}
                flexGrow={1}
                maxWidth="100%"
                width={0}
              >
                <Ellipsis>
                  <Text
                    fontSize={['2xl', null, null, '3xl']}
                    lineHeight={['2xl', null, null, '3xl']}
                  >
                    {player.name}
                  </Text>
                </Ellipsis>
              </Box>
              <Box
                flexBasis="auto"
                flexGrow={0}
                width="auto"
                fontSize={['xl', null, null, '2xl']}
                lineHeight={['xl', null, null, '2xl']}
              >
                <Light on={player.gates[0]} m="2x" />
                <Text pr="2x">REC</Text>
                <Light on={player.gates[1]} m="2x" />
                <Text pr="2x">A</Text>
                <Light on={player.gates[2]} m="2x" />
                <Text pr="2x">B</Text>
              </Box>
            </Box>
          </Box>
        </Box>
      ))}
    </Box>
  );
}

render(<Example />);
const Ellipsis = (props) => (
  <Box whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" {...props} />
);

const Light = ({ on, ...rest }) => (
  <Box
    display="inline-block"
    borderRadius="50%"
    bg={on ? '#00ff00' : '#666'}
    boxShadow={on ? '0 0 1px 2px rgba(0, 255, 0, .8)' : 'none'}
    height={16}
    width={16}
    verticalAlign="middle"
    {...rest}
  />
);

function Example() {
  const laneColor = {
    1: '#389efc',
    2: '#ff7332',
    3: '#00b449',
    4: '#fdf133',
    5: '#fc74cf',
  };

  const players = [
    { id: '240', lane: 1, name: 'Taiwan Leave System', laps: 2, raceTime: '01:20.592', gates: [1, 1, 1] },
    { id: '339', lane: 2, name: '404 Not Found', laps: 2, raceTime: '01:24.036', gates: [1, 1, 1] },
    { id: '003', lane: 3, name: 'ShowMeThe$$', laps: 2, raceTime: '01:37.890', gates: [1, 1, 0] },
    { id: '207', lane: 4, name: 'Dragon Rider', laps: 1, raceTime: '00:49.211', gates: [1, 1, 0] },
    { id: '456', lane: 5, name: 'BumbleBee', laps: 0, raceTime: '00:00.000', gates: [1, 1, 1] },
  ];

  return (
    <Box position="relative" mx="auto">
      {players.map((player, index) => (
        <Box
          key={player.id}
          display="flex"
          minWidth={360}
        >
          <Box
            flexBasis="auto"
            flexGrow={0}
            minWidth=".5rem"
            width=".5rem"
            bg={laneColor[player.lane]}
          />
          <Box
            bg={index % 2 ? 'gray:100' : 'gray:80'}
            color="white:primary"
            flexBasis={0}
            flexGrow={1}
            maxWidth="calc(100% - .5rem)"
            py="2x"
            px="6x"
          >
            <Box
              display="flex"
              alignItems="flex-end"
            >
              <Box
                flexBasis={0}
                flexGrow={1}
                maxWidth="100%"
              >
                <Text
                  color="#6fffff"
                  fontWeight="bold"
                  fontSize={['4xl', null, null, 48]}
                  lineHeights={['4xl', null, null, '1.5']}
                >
                  {player.id}
                </Text>
              </Box>
              <Box
                flexBasis="auto"
                flexGrow={0}
                width="auto"
              >
                <Text
                  fontSize={['3xl', null, null, '4xl']}
                  lineHeight={['3xl', null, null, '4xl']}
                >
                  {player.laps} / {player.raceTime}
                </Text>
              </Box>
            </Box>
            <Box
              display="flex"
              alignItems="center"
              pt="2x"
            >
              <Box
                flexBasis={0}
                flexGrow={1}
                maxWidth="100%"
                width={0}
              >
                <Ellipsis>
                  <Text
                    fontSize={['2xl', null, null, '3xl']}
                    lineHeight={['2xl', null, null, '3xl']}
                  >
                    {player.name}
                  </Text>
                </Ellipsis>
              </Box>
              <Box
                flexBasis="auto"
                flexGrow={0}
                width="auto"
                fontSize={['xl', null, null, '2xl']}
                lineHeight={['xl', null, null, '2xl']}
              >
                <Light on={player.gates[0]} m="2x" />
                <Text pr="2x">REC</Text>
                <Light on={player.gates[1]} m="2x" />
                <Text pr="2x">A</Text>
                <Light on={player.gates[2]} m="2x" />
                <Text pr="2x">B</Text>
              </Box>
            </Box>
          </Box>
        </Box>
      ))}
    </Box>
  );
}

render(<Example />);