Box

The Box component is considered a utility component, as it can be used for something as simple as a rounded corner box.

By default there are no additional styles, as these can be achieved using styled system props to enable custom theme-aware styling.

React examples

Default - styled using the sx prop

<Box
  sx={{
    backgroundColor: 'var(--bgColor-inset)',
    borderRadius: 'var(--borderRadius-medium)',
    padding: 'var(--stack-padding-spacious)',
  }}
>
  Some text inside of a Box
</Box>

Props