OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme 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>