Box

Box is a div or span that takes layout props: padding, margin, width, height, position and overflow. It has no look of its own. To lay out several children in a row or column, use Flex. For rows and columns at once, use Grid.

Playground

Copy code

Spring release

Twelve new components and a faster theme.

Usage

import { Box, Heading, Text } from '@kushagradhawan/kookie-ui';
 
export function ArticleHeader() {
  return (
    <Box
      maxWidth="640px"
      mx="auto"
      px={{ initial: '4', md: '6' }}
      py="6"
    >
      <Heading size="7">Release notes</Heading>
      <Box mt="3">
        <Text size="3" emphasis="medium">
          Changes to the API, the CLI and the dashboard, newest first.
        </Text>
      </Box>
    </Box>
  );
}

Spacing

Padding and margin props take a step from the space scale, a CSS string such as "20px" or "auto", or a responsive object.

Margins also take negative steps, "-1" to "-12", and "bleed".

Only Box, Flex and Grid take margin props. Text, Button and the other components don't, so wrap one in a Box when it needs space around it, or set gap on the parent.

Bleed

m="bleed" pulls an element out to the edges of the surface it sits in, by the surface's own padding. Card, Popover, Dialog, Alert Dialog and Notice publish their padding, so an image or a table inside one can run edge to edge. Outside a surface, bleed is zero. mx="bleed" and mt="bleed" bleed one axis or one side.

<Card>
  <Box mx="bleed" mt="bleed">
    <Image src="/cover.jpg" alt="" />
  </Box>
  <Text>Cover photo</Text>
</Card>

Responsive values

Every layout prop accepts an object keyed by breakpoint. A key applies from that width up, and initial applies at every width.

<Box display={{ initial: 'none', md: 'block' }} width={{ initial: '100%', md: '320px' }} />

Examples

Sticky header

position, top and the other edge props place the box. Edges take space steps, negative steps or CSS strings.

<Box position="sticky" top="0" py="3">
  <Toolbar />
</Box>

Inline wrapper

as="span" keeps the box inline, for space around a word or icon inside a line of text.

Rendering another element

asChild puts the box's layout props on its only child, such as a section or a link, and renders no div of its own.

<Box asChild p="4">
  <section aria-labelledby="billing">…</section>
</Box>

Props

Box also accepts every attribute of the HTML div element, or span with as="span".