SBox <s-box>

import { SBox } from 'polaris-vue-elements'

Example

background="subdued"background="strong"bordered box

<script setup>
import { SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>background="subdued"</SText>
    </SBox>
    <SBox background="strong" padding="base" borderRadius="200">
      <SText>background="strong"</SText>
    </SBox>
    <SBox
      background="base"
      padding="base"
      borderRadius="200"
      borderWidth="small"
      borderColor="strong"
      borderStyle="solid"
    >
      <SText>bordered box</SText>
    </SBox>
  </div>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies.
accessibilityRole	"generic" | "main" | "header" | "footer" | "section" | "region" | "aside" | "navigation" … (9 more)	Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Changes the visibility of the element. - visible: the element is visible to all users. - hidden: the element is removed from the accessibility tree but remains visible. - exclusive: the element is visually hidden but remains in the accessibility tree.
background	"subdued" | "base" | "strong" | "transparent"	The background color of the component.
blockSize	"auto" | "0"	The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about block-size.
border	BorderShorthand	A border applied using shorthand syntax to specify width, color, and style in a single property.
borderColor	"subdued" | "base" | "strong"	The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property. Choose from subdued, base, or strong to match the visual emphasis needed.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	The roundedness of the element's corners using the design system's radius scale. Supports 1-to-4-value syntax for specifying different radii per corner. Use this to create rounded corners or fully rounded elements.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the border property. Supports 1-to-4-value syntax for specifying different styles per side.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	The thickness of the border on all sides. When set, this overrides the width value specified in the border property. Supports 1-to-4-value syntax for specifying different widths per side.
display	"auto" | "none"	The outer display type of the component. The outer type sets a component's participation in flow layout. - auto the component's initial value. The actual value depends on the component and context. - none hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
inlineSize	"auto" | "0"	The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about inline-size.
maxBlockSize	"none" | "0"	The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about max-block-size.
maxInlineSize	"none" | "0"	The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about max-inline-size.
minBlockSize	"0"	The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about min-block-size.
minInlineSize	"0"	The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about min-inline-size.
overflow	"visible" | "hidden"	Sets the overflow behavior of the element. - hidden: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - visible: the content that extends beyond the element’s container is visible.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	The padding applied to all edges of the component. Supports 1-to-4-value syntax using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) Examples:* base, large none, base large-100 base small Use auto to inherit padding from the nearest container with removed padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. Example:* large none applies large to the top and none to the bottom. Overrides the block value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The block-start padding (top in horizontal writing modes). Overrides the block-start value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. Example:* large none applies large to the left and none to the right. Overrides the inline value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (src/lib/generated/types.ts).

Slots

Slot	Description
default	The content displayed within the box component, which serves as a flexible container for organizing and styling other components.