Components

Box

A container that applies padding, surface colour, border and corner radius from token values.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Box } from '@bigbang/ui';
Source: Box.tsx
Storybook: Box · Playground

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

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

<Box padding="xl" background="raised" border="subtle" radius="md">
  Card description goes here.
</Box>;

Props

padding

Description: Padding on all sides, from the space.* scale.
Type: SpaceToken

paddingInline

Description: Padding at the inline start and end (left and right in left-to-right text); wins over padding on those sides.
Type: SpaceToken

paddingBlock

Description: Padding at the block start and end (top and bottom); wins over padding on those sides.
Type: SpaceToken

background

Description: Surface colour. raised for cards on the page, sunken for wells, layer-* for stacked panels.
Type: 'none' | 'default' | 'raised' | 'sunken' | 'layer-1' | 'layer-2' | 'layer-3'
Default: 'none'

border

Description: A 1 px border in the default or subtle border colour.
Type: 'none' | 'default' | 'subtle'
Default: 'none'

radius

Description: Corner radius from the radius.* scale.
Type: 'none' | 'sm' | 'md' | 'lg'
Default: 'none'

render

Description: Renders another element, such as <section> or <ul>, for landmark or list semantics. Defaults to a <div>.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

children

Description: The content.
Type: ReactNode

Native <div> attributes (id, role, aria-*, data-*) are passed through. className and style are not in the type; passing them is a type error. ref is attached to the rendered element.

Data attributes

data-component="box": on the root element.