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.
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
BoxProps such as
padding, it also supports semantic anchor element props such as
Box exposes style props that allow you
to modify styles in an ergonomic way across components. To learn more about individual sets of
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