Box
Box is a primitive component that provides a common, ergonomic API around Canvas design tokens. It is highly flexible, and its primary purpose is to build other components.
Usage Guidance
Coming soon!
Examples
Basic Example
Props
The As
Prop
The as
prop allows you to override the underlying element of a component or combine it with
another component. By default, Box
will render a div
element, but sometimes that's not what you
want. Below, we have a Box
that we want to render as a semantic anchor element. The most
noticeable transformation is that Box
renders as a link. But also notice that while it still
supports all BoxProps
such as padding
, it also supports semantic anchor element props such as
href
.
Style Props
Box
exposes style props that allow you
to modify styles in an ergonomic way across components. To learn more about individual sets of Box
style props, consult the lists below.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section