Usage

Accessibility

When using a box for informative or display purposes, ensure it has at least a 3:1 contrast ratio with the background in both light and dark modes.

Live Editor

function AccessibilityExample() {
  return (
    <Box display="flex" bg="app.background.base" padding={500}>
      <Box
        width="100%"
        height="150px"
        border={500}
        borderColor="container.border.base"
        bg="container.background.base"
      />
    </Box>
  );
}