Box

Usage Guidance

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.

• Background Style Props
• Border Style Props
• Color Style Props
• Depth Style Props
• Flex Item Style Props
• Grid Item Style Props
• Layout Style Props
• Other Style Props
• Position Style Props
• Space Style Props
• Text Style Props