Box

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

Alpha

This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

Background color of box and text color inside a box can be adjusted using the Color tokens.

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


function BoxWithColorExample() {
  return (
    <Box background="background-selected">
      <Placeholder label="Content inside a box" />
    </Box>
  );
}

const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
  return (
    <div
      style={{
        background: 'var(--p-color-border-interactive-subdued)',
        height: height,
        width: width,
        borderRadius: 'inherit',
      }}
    >
      <div
        style={{
          color: 'var(--p-color-text)',
        }}
      >
        <Text as="p" variant="bodyMd">
          {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' | 'legend' | 'ul' | 'li'

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' | 'full'

Border radius.

borderRadiusEndStart?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'full'

Vertical end horizontal start border radius.

borderRadiusEndEnd?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'full'

Vertical end horizontal end border radius.

borderRadiusStartStart?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'full'

Vertical start horizontal start border radius.

borderRadiusStartEnd?'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'full'

Vertical start horizontal end border radius.

borderWidth?ShapeBorderWidthScale

Border width.

borderBlockStartWidth?ShapeBorderWidthScale

Vertical start border width.

borderBlockEndWidth?ShapeBorderWidthScale

Vertical end border width.

borderInlineStartWidth?ShapeBorderWidthScale

Horizontal start border width.

borderInlineEndWidth?ShapeBorderWidthScale

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.

role?any

Aria role.

shadow?ShadowAlias

Shadow on box.

tabIndex?any

Set tab order.

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.

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

Outline style.

printHidden?boolean

Visually hide the contents during print.

visuallyHidden?boolean

Visually hide the contents (still announced by screenreader).

zIndex?string

z-index of box.

  • Box props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about CSS logicial properties.