Box is a low-level utility component on top of which all other Fuegokit components are built. It renders a div element by default and applies CSS properties directly via props.
Import
import { Box } from "@fuegokit/react";
Usage
Pass styles directly to Box via props:
Use the styles defined in Fuegokit's system themes by design tokens with a common props API.
Systems props are deprecated. They should only be used in Fuegokit React's `Text` and `Box` components. Use the sx prop or themeGet when composing components Fuegokit React.
Theme-aware system values
Box is meant to be used as a primitive to consume Fuegokit's design tokens.
It respects values you provide via a theme object, and it makes those values available to you via the sx prop. Box allows you to efficiently compose UI in the product environment with consistent branding and our common design language, while also providing an escape hatch when necessary:
The "as" prop
Box accepts a polymorphic as prop, but it should only be used in a way that accessibility will be improved by using the semantically appropriate HTML element consistent with the component's
intended use.
Accessibility
Box renders a div by default. While Box does accept an as prop, always use semantic HTML that allows screen readers and other tools to support interaction. As a general rule, the element should behave in a way that is consistent with the way someone expects that type of object to behave.
Many semantic elements have meaning to assistive devices and browsers that provide context for the user and, in many cases, provide or restrict interactive behaviors. Use caution when overriding defaults or using the "as" prop, and make sure that the element you choose to render provides the same experience for all users.
Why should I use a Box component?
There are many versions of a Box component. Some versions are flexible, and some versions are restrictive.
Fuegokit React's Box component is meant to be used as a primitive to consume Fuegokit's design tokens, providing a balance between flexibility and constraints.
It can be used as a lower level API to implement your own components, as well as a general usage component:
- As a prototyping tool, it allows you to use Fuegokit's design tokens to rapidly generate new designs and evaluate whether you need to iterate on your foundations, or to validate if they work for your use cases.
- For general usage, you have the guarantee that users of the system won't do anything impossible (such as use a value that doesn't exist in
@fuegokit/tokens), while still having a productive experience working on the UI.
Props
Box
| Name | Type | Default | Description |
|---|---|---|---|
| ref | React.RefObject<HTMLDivElement> | A ref to the element rendered by this component. Because this component is polymorphic, the type will vary based on the value of the as prop. | |
| as | React.ElementType | "div" | The underlying element to render — either a HTML element name or a React component. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also the sx prop. |