Box

Box is the most primitive layout component. It’s a way to access Polaris design tokens.

Alpha

This component and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

By default, box has no padding, borders, border radius, background, or shadows.

import React from 'react';
import {Box, Text} from '@shopify/polaris';


function BoxDefaultExample() {
  return (
    <Box>
      <Placeholder label="Content inside a box" />
    </Box>
  );
}

const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
  return (
    <div
      style={{
        background: '#7B47F1',
        height: height,
        width: width,
      }}
    >
      <div
        style={{
          color: '#FFFFFF',
        }}
      >
        <Text as="h2" variant="bodyMd" fontWeight="medium">
          {label}
        </Text>
      </div>
    </div>
  );
};

Props

Want to help make this feature better? Please share your feedback.

interface BoxProps
children?React.ReactNode
as?'div' | 'span' | 'section'

HTML Element type.

Defaults to 'div'.

background?ColorsBackdropTokenAlias | ColorsBackgroundTokenAlias | ColorsOverlayTokenAlias | ColorsActionTokenAlias | ColorsSurfaceTokenAlias

Background color.

border?'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'

Border style.

borderBlockEnd?'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'

Vertical end border style.

borderInlineStart?'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'

Horizontal start border style.

borderInlineEnd?'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'

Horizontal end border style.

borderBlockStart?'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'

Vertical start border style.

borderRadius?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'

Border radius.

borderRadiusEndStart?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'

Vertical end horizontal start border radius.

borderRadiusEndEnd?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'

Vertical end horizontal end border radius.

borderRadiusStartStart?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'

Vertical start horizontal start border radius.

borderRadiusStartEnd?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'

Vertical start horizontal end border radius.

borderWidth?"1" | "2" | "3" | "4" | "5"

Border width.

borderBlockStartWidth?"1" | "2" | "3" | "4" | "5"

Vertical start border width.

borderBlockEndWidth?"1" | "2" | "3" | "4" | "5"

Vertical end border width.

borderInlineStartWidth?"1" | "2" | "3" | "4" | "5"

Horizontal start border width.

borderInlineEndWidth?"1" | "2" | "3" | "4" | "5"

Horizontal end border width.

color?'text' | 'text-critical' | 'text-disabled' | 'text-highlight' | 'text-on-critical' | 'text-on-dark' | 'text-on-interactive' | 'text-on-primary' | 'text-primary' | 'text-primary-hovered' | 'text-primary-pressed' | 'text-subdued' | 'text-subdued-on-dark' | 'text-success' | 'text-warning'

Color of children.

id?string

HTML id attribute.

minHeight?string

Minimum height of container.

minWidth?string

Minimum width of container.

maxWidth?string

Maximum width of container.

overflowX?'hidden' | 'scroll'

Clip horizontal content of children.

overflowY?'hidden' | 'scroll'

Clip vertical content of children.

padding?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.

paddingBlockStart?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Vertical start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.

paddingBlockEnd?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Vertical end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.

paddingInlineStart?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Horizontal start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.

paddingInlineEnd?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Horizontal end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.

shadow?"button" | "base" | "transparent" | "faint" | "deep" | "top-bar" | "card" | "popover" | "layer" | "modal"

Shadow on box.

width?string

Width of container.

position?'relative' | 'absolute' | 'fixed' | 'sticky'

Position of box.

insetBlockStart?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Top position of box.

insetBlockEnd?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Bottom position of box.

insetInlineStart?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Left position of box.

insetInlineEnd?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

Right position of box.

opacity?string

Opacity of box.

visuallyHidden?boolean

Visually hide the contents (still announced by screenreader).

zIndex?string

z-index of box.