<dt-box> ... </dt-box>
DtBox complements DtText (typography) and DtStack (flex layout) to form Dialtone's primitive triad:
surface, border, padding, sizing, positioning)font, size, color)direction, gap, alignment)d-bgc-*, d-bc-*, d-bar*, d-bs-*, d-p-*, d-ps-*).as prop to render semantic HTML elements (section, nav, article, header, etc.) for accessibility.<dt-box><dt-stack>...</dt-stack></dt-box>.as prop for semantic HTML: <dt-box as="nav">, <dt-box as="section">.class for one-off styling outside DtBox's prop surface, including responsive, calc, reset, arbitrary, or non-DtBox positioning utilities.class="d-bgc-primary" when surface="primary" exists).Background surface color mapped to --dt-color-surface-* tokens.
<dt-box surface="{surfaceColor}">...</dt-box>
<dt-box surface="{surfaceColor}">...</dt-box>
Spacing token scale values for internal whitespace. The padding cascade resolves specific sides over axis shorthands over the all-sides shorthand.
<dt-box padding="{padding}">...</dt-box>
Override specific sides. The cascade resolves: paddingBlockStart > paddingBlock > padding.
<dt-box padding="200" surface="moderate" border-radius="300">All sides: 200</dt-box> <dt-box padding="200" padding-inline="400" surface="moderate" border-radius="300">Inline override: 400</dt-box> <dt-box padding="200" padding-block-start="400" surface="moderate" border-radius="300">Block-start override: 400</dt-box>
No visible border until a border-width is set. Uniform width applies to all sides.
<dt-box padding="200" surface="moderate" border-radius="300">No border</dt-box> <dt-box padding="200" surface="moderate" border-width="100" border-radius="300">100</dt-box> <dt-box padding="200" surface="moderate" border-width="200" border-radius="300">200</dt-box>
Show borders on specific sides only.
<dt-box padding="200" surface="moderate" border-width-block-end="100">Bottom only</dt-box> <dt-box padding="200" surface="moderate" border-width-inline-start="200" border-color="critical">Start critical</dt-box> <dt-box padding="200" surface="moderate" border-width-block="100" border-width-inline="0">Block only</dt-box>
Defaults to 'default' (--dt-color-border-default). Only visible when a border-width is set.
<dt-box padding="200" surface="moderate" border-width="100" border-radius="300">default</dt-box> <dt-box padding="200" surface="moderate" border-width="100" border-color="subtle" border-radius="300">subtle</dt-box> <dt-box padding="200" surface="moderate" border-width="100" border-color="critical" border-radius="300">critical</dt-box> <dt-box padding="200" surface="moderate" border-width="100" border-color="positive" border-radius="300">positive</dt-box>
<dt-box padding="200" surface="moderate" border-radius="0">0</dt-box> <dt-box padding="200" surface="moderate" border-radius="200">200</dt-box> <dt-box padding="200" surface="moderate" border-radius="400">400</dt-box> <dt-box padding="200" surface="moderate" border-radius="pill" inline-size="200" class="d-ta-center">pill</dt-box> <dt-box surface="moderate" border-radius="circle" inline-size="100" block-size="100" class="d-plc-center d-ta-center">circle</dt-box>
<dt-box padding="200" surface="moderate" border-radius="300" shadow="small">small</dt-box> <dt-box padding="200" surface="moderate" border-radius="300" shadow="medium">medium</dt-box> <dt-box padding="200" surface="moderate" border-radius="300" shadow="large">large</dt-box> <dt-box padding="200" surface="moderate" border-radius="300" shadow="card">card</dt-box>
Maps to Dialtone's layout token scale (--dt-layout-*). Supports both fixed values and percentage tokens.
<dt-box padding="200" surface="moderate" border-radius="300" inline-size="300">300 (192px)</dt-box> <dt-box padding="200" surface="moderate" border-radius="300" inline-size="500">500 (320px)</dt-box> <dt-box padding="200" surface="moderate" border-radius="300" inline-size="50p">50p</dt-box>
Use position prop paired with inset and z-index props to position a box. The position prop maps to CSS's position property, and the inset props map to CSS's logical inset-* properties.
Their values map to Dialtone's coordinate value set: spacing values, negative spacing values, and percentage coordinates. For example, inset-block-start maps to the block-start edge, aka the physical value top.
As a fallback, positioning CSS utilities are available: position, coordinates, and z-index.
<dt-box max-block-size="400" surface="secondary" border-width="100" border-color="subtle" scrollbar="always" > <dt-box as="header" position="sticky" inset-block-start="0" z-index="navigation" padding="200" padding-block="100" surface="secondary" border-width-block-end="100" border-color="subtle" > <dt-stack direction="row" justify="space-between" align="center"> <dt-text as="h2" kind="headline" :size="300">Sticky header</dt-text> </dt-stack> </dt-box> <dt-box padding="100" padding-inline="200"> <dt-stack gap="100"> <dt-text v-for="i in 20" :key="i" kind="body" size="sm">Scrollable item {{ i }}</dt-text> </dt-stack> </dt-box> </dt-box>
The inset cascade resolves specific sides over axis shorthands over the all-sides shorthand. inset positions the outside edges of a positioned box; use padding for internal spacing. Percentage coordinate values apply only to side-specific props.
<dt-box position="relative" inline-size="100p" block-size="300" border-radius="300" border-width="100" border-color="subtle"> <dt-box position="absolute" padding="200" border-radius="300" inset-block-start="100" inset-inline-start="100" surface="moderate-opaque" > <dt-text as="p" variant="body-sm">Top Left</dt-text> </dt-box> <dt-box position="absolute" padding="200" border-radius="300" inset-block-start="100" inset-inline-end="100" surface="moderate-opaque" > <dt-text as="p" variant="body-sm">Top Right</dt-text> </dt-box> <dt-box position="absolute" padding="200" border-radius="300" inset-block-end="100" inset-inline-end="100" surface="moderate-opaque" > <dt-text as="p" variant="body-sm">Bottom Right</dt-text> </dt-box> <dt-box position="absolute" padding="200" border-radius="300" inset-block-end="100" inset-inline-start="100" surface="moderate-opaque" > <dt-text as="p" variant="body-sm">Bottom Left</dt-text> </dt-box> </dt-box>
The z-index prop maps to Dialtone's semantic z-index tokens. Stacking order depends on the element's layout context, so prefer the lowest layer that fits the container and keep overlay behavior in dedicated overlay components.
<dt-box position="relative" inline-size="100p" block-size="300" border-radius="300" border-width="100" border-color="subtle"> <dt-box position="absolute" padding="200" border-radius="300" inset-block-start="400" inset-inline-start="500" surface="info" z-index="base1" > <dt-text as="p" variant="body-sm">Above</dt-text> </dt-box> <dt-box position="absolute" padding="200" border-radius="300" inset-block-start="100" inset-inline-start="100" surface="moderate" > <dt-text as="p" variant="body-sm">Beneath</dt-text> </dt-box> </dt-box>
<dt-box surface="moderate" border-radius="300" overflow="hidden" inline-size="500" block-size="200" padding="200" > Tall content clipped by <dt-text kind="code" size="200">overflow="hidden"</dt-text>. Nemo rem ullam culpa ut laudantium repellat unde. Consequuntur cupiditate voluptatem velit rerum doloremque voluptatum commodi vitae vel inventore iusto ducimus iure? Ex fugit quae iste perferendis eaque! Alias in reiciendis suscipit facere incidunt repellendus! Voluptatibus iste nesciunt numquam consectetur suscipit unde atque tempora saepe est illum quaerat sit natus mollitia excepturi? Repellendus explicabo deserunt ipsam sint esse ab delectus beatae eligendi velit libero quasi culpa ut tenetur sunt corrupti iure suscipit magni fuga blanditiis nihil incidunt! Mollitia voluptas sed temporibus quasi. </dt-box>
Integrates the v-dt-scrollbar directive. An inner viewport wrapper is inserted automatically, solving the Custom Scrollbar's single-child constraint.
<dt-box padding="200" border-width="100" border-radius="300" scrollbar="always" block-size="300" > <dt-stack gap="100"> <dt-text v-for="i in 20" :key="i" kind="body" size="sm">Scrollable item {{ i }}</dt-text> </dt-stack> </dt-box>
Use the as prop to render semantic HTML elements for accessibility.
<dt-box as="section" padding="200" surface="moderate" border-radius="300">as="section"</dt-box> <dt-box as="nav" padding="200" surface="moderate" border-radius="300">as="nav"</dt-box> <dt-box as="article" padding="200" surface="moderate" border-radius="300">as="article"</dt-box>
<dt-box padding="300" surface="primary" border-width="100" border-radius="400" shadow="card" > <dt-stack gap="200"> <dt-text as="h3" kind="headline" size="md">Card title</dt-text> <dt-text kind="body" size="sm">Card body content with supporting text.</dt-text> </dt-stack> </dt-box>
<dt-box padding="200" surface="primary" border-width="100" border-radius="400" > <dt-stack gap="200"> <dt-stack direction="row" justify="space-between" align="baseline"> <dt-text as="h2" kind="headline" :size="400">Title</dt-text> <dt-button size="200">Action</dt-button> </dt-stack> <dt-stack direction="row" gap="200"> <dt-box class="d-fl1" padding="200" surface="secondary" border-width="100" border-color="subtle" border-radius="300"> <dt-text as="p" align="center" tone="muted">Box 1</dt-text> </dt-box> <dt-box class="d-fl1" padding="200" surface="secondary" border-width="100" border-color="subtle" border-radius="300"> <dt-text as="p" align="center" tone="muted">Box 2</dt-text> </dt-box> <dt-box class="d-fl1" padding="200" surface="secondary" border-width="100" border-color="subtle" border-radius="300"> <dt-text as="p" align="center" tone="muted">Box 3</dt-text> </dt-box> </dt-stack> </dt-stack> </dt-box>
as prop to render appropriate semantic elements — nav for navigation, section for thematic content, article for self-contained content.as="nav" or as="section", consider adding aria-label to provide an accessible name for the landmark region.import { DtBox } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Slot for main content |
Name
|
Default
|
Type
|
|---|---|---|
as | 'div' |
"div"
|
"span"
|
"section"
|
"article"
|
"aside"
|
"main"
|
"header"
|
"footer"
|
"nav"
|
"ul"
|
"ol"
|
"li"
|
"fieldset"
|
"form"
|
"figure"
HTML element to render as. |
blockSize |
"0"
|
"1px"
|
"2px"
|
"8px"
|
"25"
|
"20px"
|
"24px"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"850"
|
"900"
|
"950"
|
"1000"
|
"1050"
|
"1100"
|
"1150"
|
"1200"
|
"1250"
|
"1300"
|
"1350"
|
"1400"
|
"1450"
|
"1500"
|
"1550"
|
"1600"
|
"10p"
|
"20p"
|
"25p"
|
"30p"
|
"33p"
|
"40p"
|
"50p"
|
"60p"
|
"66p"
|
"70p"
|
"75p"
|
"80p"
|
"90p"
|
"95p"
|
"100p"
Block size (aka height). Maps to --dt-layout-* tokens. | |
borderColor | 'default' |
"transparent"
|
"subtle"
|
"default"
|
"moderate"
|
"bold"
|
"accent"
|
"positive"
|
"positive-subtle"
|
"positive-strong"
|
"warning"
|
"warning-subtle"
|
"warning-strong"
|
"critical"
|
"critical-subtle"
|
"critical-strong"
|
"info"
|
"info-subtle"
|
"info-strong"
|
"focus"
|
"brand"
|
"brand-subtle"
|
"brand-strong"
Border color. Maps to --dt-color-border-* tokens.
Defaults to 'default'. Visible when any border-width prop is set. |
borderRadius |
"0"
|
"100"
|
"200"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"pill"
|
"circle"
Border radius. Maps to --dt-size-radius-* tokens. | |
borderWidth |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on all sides. Maps to --dt-size-border-* tokens. | |
borderWidthBlock |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on the block axis (aka top/bottom).
Overrides | |
borderWidthBlockEnd |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on the block-end side (aka bottom).
Overrides | |
borderWidthBlockStart |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on the block-start side (aka top).
Overrides | |
borderWidthInline |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on the inline axis (aka left/right).
Overrides | |
borderWidthInlineEnd |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on the inline-end side (aka right).
Overrides | |
borderWidthInlineStart |
"0"
|
"50"
|
"100"
|
"150"
|
"200"
|
"300"
|
"400"
Border width on the inline-start side (aka left).
Overrides | |
inlineSize |
"0"
|
"1px"
|
"2px"
|
"8px"
|
"25"
|
"20px"
|
"24px"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"850"
|
"900"
|
"950"
|
"1000"
|
"1050"
|
"1100"
|
"1150"
|
"1200"
|
"1250"
|
"1300"
|
"1350"
|
"1400"
|
"1450"
|
"1500"
|
"1550"
|
"1600"
|
"10p"
|
"20p"
|
"25p"
|
"30p"
|
"33p"
|
"40p"
|
"50p"
|
"60p"
|
"66p"
|
"70p"
|
"75p"
|
"80p"
|
"90p"
|
"95p"
|
"100p"
Inline size (aka width). Maps to --dt-layout-* tokens. | |
inset |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
Inset on all sides. Accepts spacing coordinate values and negative spacing coordinate values. | |
insetBlock |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
Inset on the block axis (aka top/bottom).
Overrides | |
insetBlockEnd |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
|
"50p"
|
"100p"
|
"n50p"
|
"n100p"
Inset on the block-end side (aka bottom).
Overrides | |
insetBlockStart |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
|
"50p"
|
"100p"
|
"n50p"
|
"n100p"
Inset on the block-start side (aka top).
Overrides | |
insetInline |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
Inset on the inline axis (aka left/right).
Overrides | |
insetInlineEnd |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
|
"50p"
|
"100p"
|
"n50p"
|
"n100p"
Inset on the inline-end side (aka right).
Overrides | |
insetInlineStart |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"n1"
|
"n25"
|
"n50"
|
"n75"
|
"n100"
|
"n125"
|
"n150"
|
"n175"
|
"n200"
|
"n250"
|
"n300"
|
"n350"
|
"n400"
|
"n450"
|
"n500"
|
"n525"
|
"n550"
|
"n600"
|
"n650"
|
"n700"
|
"n750"
|
"n800"
|
"50p"
|
"100p"
|
"n50p"
|
"n100p"
Inset on the inline-start side (aka left).
Overrides | |
maxBlockSize |
"0"
|
"1px"
|
"2px"
|
"8px"
|
"25"
|
"20px"
|
"24px"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"850"
|
"900"
|
"950"
|
"1000"
|
"1050"
|
"1100"
|
"1150"
|
"1200"
|
"1250"
|
"1300"
|
"1350"
|
"1400"
|
"1450"
|
"1500"
|
"1550"
|
"1600"
|
"10p"
|
"20p"
|
"25p"
|
"30p"
|
"33p"
|
"40p"
|
"50p"
|
"60p"
|
"66p"
|
"70p"
|
"75p"
|
"80p"
|
"90p"
|
"95p"
|
"100p"
Maximum block size. Maps to --dt-layout-* tokens. | |
maxInlineSize |
"0"
|
"1px"
|
"2px"
|
"8px"
|
"25"
|
"20px"
|
"24px"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"850"
|
"900"
|
"950"
|
"1000"
|
"1050"
|
"1100"
|
"1150"
|
"1200"
|
"1250"
|
"1300"
|
"1350"
|
"1400"
|
"1450"
|
"1500"
|
"1550"
|
"1600"
|
"10p"
|
"20p"
|
"25p"
|
"30p"
|
"33p"
|
"40p"
|
"50p"
|
"60p"
|
"66p"
|
"70p"
|
"75p"
|
"80p"
|
"90p"
|
"95p"
|
"100p"
Maximum inline size. Maps to --dt-layout-* tokens. | |
minBlockSize |
"0"
|
"1px"
|
"2px"
|
"8px"
|
"25"
|
"20px"
|
"24px"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"850"
|
"900"
|
"950"
|
"1000"
|
"1050"
|
"1100"
|
"1150"
|
"1200"
|
"1250"
|
"1300"
|
"1350"
|
"1400"
|
"1450"
|
"1500"
|
"1550"
|
"1600"
|
"10p"
|
"20p"
|
"25p"
|
"30p"
|
"33p"
|
"40p"
|
"50p"
|
"60p"
|
"66p"
|
"70p"
|
"75p"
|
"80p"
|
"90p"
|
"95p"
|
"100p"
Minimum block size. Maps to --dt-layout-* tokens. | |
minInlineSize |
"0"
|
"1px"
|
"2px"
|
"8px"
|
"25"
|
"20px"
|
"24px"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
|
"850"
|
"900"
|
"950"
|
"1000"
|
"1050"
|
"1100"
|
"1150"
|
"1200"
|
"1250"
|
"1300"
|
"1350"
|
"1400"
|
"1450"
|
"1500"
|
"1550"
|
"1600"
|
"10p"
|
"20p"
|
"25p"
|
"30p"
|
"33p"
|
"40p"
|
"50p"
|
"60p"
|
"66p"
|
"70p"
|
"75p"
|
"80p"
|
"90p"
|
"95p"
|
"100p"
Minimum inline size. Maps to --dt-layout-* tokens. | |
overflow |
"hidden"
|
"scroll"
|
"auto"
|
"clip"
|
"visible"
Overflow behavior. | |
padding |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on all sides. Accepts spacing token scale values. | |
paddingBlock |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on the block axis (aka top/bottom).
Overrides | |
paddingBlockEnd |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on the block-end side (aka bottom).
Overrides | |
paddingBlockStart |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on the block-start side (aka top).
Overrides | |
paddingInline |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on the inline axis (aka left/right).
Overrides | |
paddingInlineEnd |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on the inline-end side (aka right).
Overrides | |
paddingInlineStart |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Padding on the inline-start side (aka left).
Overrides | |
position |
"static"
|
"relative"
|
"absolute"
|
"fixed"
|
"sticky"
CSS position value. | |
scrollbar |
"leave"
|
"scroll"
|
"move"
|
"always"
Custom scrollbar via OverlayScrollbars. When set, an inner viewport
wrapper (.d-box__scrollbar-content) is inserted automatically. | |
scrollbarContentClass | '' | string|object|array Additional CSS classes applied to the scrollbar content wrapper element.
Only applies when scrollbar prop is set. |
shadow |
"small"
|
"medium"
|
"large"
|
"extra-large"
|
"card"
Box shadow. Maps to --dt-shadow-* tokens. | |
surface |
"primary"
|
"primary-opaque"
|
"secondary"
|
"secondary-opaque"
|
"moderate"
|
"moderate-opaque"
|
"bold"
|
"bold-opaque"
|
"strong"
|
"strong-opaque"
|
"contrast"
|
"contrast-opaque"
|
"backdrop"
|
"overlay"
|
"brand"
|
"brand-opaque"
|
"brand-subtle"
|
"brand-subtle-opaque"
|
"brand-strong"
|
"info"
|
"info-opaque"
|
"info-subtle"
|
"info-subtle-opaque"
|
"info-strong"
|
"positive"
|
"positive-opaque"
|
"positive-subtle"
|
"positive-subtle-opaque"
|
"positive-strong"
|
"warning"
|
"warning-opaque"
|
"warning-subtle"
|
"warning-subtle-opaque"
|
"warning-strong"
|
"critical"
|
"critical-opaque"
|
"critical-subtle"
|
"critical-subtle-opaque"
|
"critical-strong"
Background surface color. Maps to --dt-color-surface-* tokens. | |
zIndex |
"hide"
|
"base"
|
"base1"
|
"selected"
|
"active"
|
"navigation"
|
"navigation-fixed"
|
"dropdown"
|
"popover"
|
"tooltip"
|
"drawer"
|
"modal"
|
"modal-element"
|
"notification"
Z-index layer. Maps to --zi-* tokens. |
Class
|
Applies to
|
Description
|
|---|
Box documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope