import {Box} from '@primer/react-brand'Examples
Box requires the dir attribute to be set on the <html /> element to ensure that directional padding and margin values are applied correctly.
Default
The Box component, by default, represents an empty <div> element with no predefined styles applied to it.
Uniform padding
Use padding to apply equal inner spacing to all sides of an element.
Directional padding
Apply internal spacing to a specific side. Directional padding is implemented with CSS logical properties and accepts functional spacing names, or values from the base scale.
Uniform margin
Use margin to apply equal outer spacing to all sides of an element.
Directional margin
Apply external spacing to a specific side. Directional margins are implemented with CSS logical properties and accepts functional spacing names, or values from the base scale.
Responsive spacing
All padding and margin options can be configured for indivisual viewports: Each viewport entry is applied using a min-width media query.
Border radius
Borders
Background colors
Component props
Box
| Name | Type | Default | Description |
|---|---|---|---|
padding | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds padding to all internal sides of the Box. |
paddingBlockStart | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds padding to the internal block start (top) side of the Box. |
paddingRight | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds padding to the internal inline end (right) of the Box. |
paddingBlockEnd | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds padding to the internal block end (bottom) side of the Box. |
paddingLeft | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds padding to the internal inline start (left) side of the Box. |
margin | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds margin to all external sides of the Box. |
marginBlockStart | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds margin to the external block start (top) side of the Box. |
marginInlineEnd | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds margin to the external inline end (right) side of the Box. |
marginBlockEnd | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds margin to the external block end (bottom) side of the Box. |
marginInlineStart | 'none', 'condensed', 'normal', 'spacious', 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 | undefined | Adds margin to the external inline start (left) side of the Box. |
backgroundColor | 'default', 'inset', 'subtle', 'overlay' or string | undefined | Applies a system-level background color to the Box. |
borderRadius | 'small', 'medium', 'large', 'xlarge', 'full' | undefined | Applies a system-level border radius value to the Box. |
borderWidth | 'none', 'thin', 'thick', 'thicker' | undefined | Applies a system-level border width value to the Box. |
borderBlockStartWidth | 'none', 'thin', 'thick', 'thicker' | undefined | Applies a system-level border width value to block-start side of the Box. |
borderInlineEndWidth | 'none', 'thin', 'thick', 'thicker' | undefined | Applies a system-level border width value to inline-end side of the Box. |
borderBlockEndWidth | 'none', 'thin', 'thick', 'thicker' | undefined | Applies a system-level border width value to block-end side of the Box. |
borderInlineStartWidth | 'none', 'thin', 'thick', 'thicker' | undefined | Applies a system-level border width value to inline-start side of the Box. |
borderColor | 'default', 'muted', 'subtle' | undefined | Applies a system-level border color value to the Box. |
borderStyle | 'solid', 'none' | undefined | Applies border style. Values correspond to the CSS border-style property. |