Box

Import#

import { Box } from '@volue/wave-react';

About 📦️#

Box is a most universal, smallest building block for layouts. Its job is to render an individual element on the screen. By default, it just renders a div element.

However it's created using the styled() function of @volue/wave-react, so it has access to special css prop that generates class names from style objects.

css prop features a superset of CSS, so it's intuitive to pick up and applying styles with it feels similar to how you would define inline styles. The difference is that the underlying Stitches library​ takes things to the next-level with a fully-typed API, support for features like tokens, media queries and variants.

Box component quite often comes handy, because it allows you to avoid creating a new styled component when you only need to customize a few CSS properties on the spot.

Utilizing tokens from our theme such as spacing tokens ensures consistency by taking advantage of constraint-based design principles.

Example#

as prop#

You can use the as prop to change the element is rendered. You can pass either a string to change the DOM element type, or a React component type to inherit another component.

Margins & paddings#

You can apply margin and padding properties to the Box component. Margins and paddings are based on our spacing system.

API Reference#