A page wrapper that centers content and constrains its maximum width.
import { Container } from "@backstage/ui";
<Container>
{/* Your plugin's main content */}
</Container>Container provides the standard page layout for plugin content. It constrains content to a maximum width, centers it horizontally, and adds consistent horizontal gutters. Use it once per page to wrap your main content area.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to render inside the container. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
00.5auto | - | Vertical spacing properties for controlling margin and padding. |
Vertical spacing props accept breakpoint objects.
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-ContainerMigrated all components from useStyles to useDefinition hook. Exported OwnProps types for each component, enabling better type composition for consumers. #33050
Removed the transition on Container padding to prevent an unwanted animation when the viewport is resized. #32984
Fixed incorrect bottom spacing caused by Container using padding-bottom for its default bottom spacing. Changed to margin-bottom and prevented it from applying when Container is used as the Header root element. #33354
Extended AlertProps, ContainerProps, DialogBodyProps, and FieldLabelProps with native div element props to allow passing attributes like aria-* and data-*. #33095