Overview

UsageComing soon

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Box

The fundamental building block.

 <Box width="64px" height="64px" style={{ backgroundColor: 'var(--gray-a6)' }} />

API Reference

Only display prop is unique to the Box component.

Prop	Type	Default
`display`	`Responsive<"none" \| "inline" \| "inline-block" \| "block">`

The following props are shared between Box, Container, Flex, Grid, and Section layout components.

Prop	Type	Default
`position`	`Responsive<"static" \| "relative" \| "absolute" \| "fixed" \| "sticky">`
`inset`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`top`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`bottom`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`left`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`right`	`Responsive<Union<string, "-9" \| "-8" \| "-7" \| "-6" \| "-5" \| "-4" \| "-3" \| "-2" \| "-1" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`p`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`py`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`px`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`pt`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`pb`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`pl`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`pr`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`
`width`	`Responsive<string>`
`minWidth`	`Responsive<string>`
`maxWidth`	`Responsive<string>`
`height`	`Responsive<string>`
`minHeight`	`Responsive<string>`
`maxHeight`	`Responsive<string>`
`gridColumn`	`Responsive<string>`
`gridColumnStart`	`Responsive<string>`
`gridColumnEnd`	`Responsive<string>`
`gridRow`	`Responsive<string>`
`gridRowStart`	`Responsive<string>`
`gridRowEnd`	`Responsive<string>`
`flexShrink`	`Responsive<Union<string, "0" \| "1">>`
`flexGrow`	`Responsive<Union<string, "0" \| "1">>`

This component is based on the div element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Display

Use the display prop to specify the layout behaviour. You can change it across breakpoints using the object syntax.

We do not plan to create a component that combines block, flex, and grid display values, as this usually leads to messy layouts. Sensibly composing Box, Flex, and Grid components is the key to creating even the most complex responsive layouts.

Single Sign-On

Integrate with any identity provider

 <Card m="5" size="3">
  <Flex gap="4">
    <Box display={{ initial: 'none', md: 'block' }}>
      <FeatureIcon feature="sso" size="1" />
    </Box>
    <Box>
      <Heading as="h2" size="4">
        Single Sign-On
      </Heading>
      <Text as="p">Integrate with any identity provider</Text>
    </Box>
  </Flex>
</Card>

Positioned

Use the position, inset, top, bottom, left, and right props to create positioned elements. You can also change these values across breakpoints using the object syntax.

The position offset props don’t support space scale values like "1", "2", "3", … , encouraging the separation of layout concerns. Use margin and padding props to achieve a similar result.

Audit Logs

Ingest and export events

New

 <Card m="5" size="3">
  <Flex gap="4">
    <FeatureIcon feature="audit-logs" size="1" />
    <Box>
      <Heading as="h2" size="4">
        Audit Logs
      </Heading>
      <Text as="p">Ingest and export events</Text>
    </Box>
    <Box position="absolute" top="0" right="0" m="3">
      <Badge color="purple" size="2">
        New
      </Badge>
    </Box>
  </Flex>
</Card>

Width and height

Use the width and height props to specify the Box size.

As usual, the numerical values "1", "2", "3", … , correspond to the space scale steps.

 <Box width="48px" height="48px">
  <MoonIcon width="100%" height="100%" />
</Box>

Within flex layout

Use the shrink and grow props to control the size of elements in a flex container.

 <Flex gap="3">
  <Box flexGrow="1">
    <TextField.Root placeholder="Organization name" />
  </Box>
  <Button color="purple">Create</Button>
</Flex>

With padding

Use the p, py, px, pt, pb, pl, and pr props to add padding around elements.

Single Sign-On → Login Flows → SP-Initiated SSO

 <Box
  py="3"
  px="4"
  display="inline-block"
  style={{ border: '2px solid', borderRadius: 'var(--radius-4)' }}
>
  <Text size="2" weight="bold">
    Single Sign-On → Login Flows → SP-Initiated SSO
  </Text>
</Box>

Combine padding and margin props to increase the clickable area of links.

Homepage

 <Link color="gray" href="/">
  <Box display="inline" p="3" m="-3">
    Homepage
  </Box>
</Link>