Container

Installation

Package

@bigbang/ui

Import

import { Container } from '@bigbang/ui';

Source

Container.tsx

Storybook

Container · Playground

Container is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

import { Container } from '@bigbang/ui';

<Container size="sm" render={<main />}>
  ...
</Container>;

Props

size

Description

Maximum content width: sm 720 px for forms and reading, md 1104 px for dashboard content, lg 1440 px for wide tables, full for no limit.

Type

'sm' | 'md' | 'lg' | 'full'

Default

'md'

render

Description

Renders another element, such as <main> or <section>. Defaults to a <div>.

Type

ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description

For layout only: block margins and padding. Do not use it to change the width.

Type

string

children

Description

The page content.

Type

ReactNode

Native <div> attributes are passed through.

Data attributes

• data-component="container": on the root element.