Skip to contentShopify logoPolaris

Box

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

Alpha

This component 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
as?'div' | 'span' | 'section'

HTML Element type.

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'

Verital 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

Set minimum height of container.

minWidth?string

Set minimum width of container.

maxWidth?string

Set maximum width of container.

overflowX?'hidden' | 'scroll'

Clip horizontal content of children.

overflowY?'hidden' | 'scroll'

Clip vertical content of children.

padding?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Spacing around children.

paddingBlockStart?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Vertical start spacing around children.

paddingBlockEnd?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Vertical end spacing around children.

paddingInlineStart?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Horizontal start spacing around children.

paddingInlineEnd?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Horizontal end spacing around children.

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

Shadow.

width?string

Set width of container.

children?React.ReactNode

Elements to display inside box.