The lowest-level component in Backstage UI with spacing, sizing, and display props.
import { Box } from '@backstage/ui';
<Box p="4" surface="1">
Content with padding and background
</Box>| Prop | Type | Default | Description |
|---|---|---|---|
| as | string | div | HTML element to render. Accepts any valid HTML tag (div, span, section, etc.). |
| surface | 0123dangerwarningsuccessauto | - | Background surface level for visual hierarchy. Higher numbers create elevation. |
| children | ReactNode | - | Content to render inside the box. |
| width | string | - | Sets the width of the element. Accepts CSS values. |
| minWidth | string | - | Sets the minimum width. Element cannot shrink below this. |
| maxWidth | string | - | Sets the maximum width. Element cannot grow beyond this. |
| height | string | - | Sets the height of the element. Accepts CSS values. |
| minHeight | string | - | Sets the minimum height. Element cannot shrink below this. |
| maxHeight | string | - | Sets the maximum height. Element cannot grow beyond this. |
| position | staticrelativeabsolutefixedsticky | - | CSS positioning scheme for the element. |
| display | noneflexblockinline | - | Controls layout behavior. Use flex for flexbox layouts, none to hide. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
00.5auto | - | Padding and margin properties for controlling spacing around the element. |
Use surface levels to create visual hierarchy.
<Flex direction="column" gap="4">
<Box p="4" surface="0">Surface 0</Box>
<Box p="4" surface="1">Surface 1</Box>
<Box p="4" surface="2">Surface 2</Box>
<Box p="4" surface="3">Surface 3</Box>
</Flex>Props can accept breakpoint objects for responsive behavior.
<Box
p={{ initial: '2', md: '4' }}
display={{ initial: 'block', md: 'flex' }}
>
Content
</Box>Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-Box