`background`

The background sprinkle provides a set of properties for styling an element’s background.

<Box background={{ color: "primary.base" }} size={300} />

Properties

`color`

The color property accepts a color from the theme’s color palette. The supported colors are sourced from both primitive.colors and semantic.colors.

<Row gap={200}>
  <Box background={{ color: "secondary.base" }} size={300} />
  <Box background={{ color: "surface.container.medium" }} size={300} />
  <Box background={{ color: "error.container" }} size={300} />
  <Box background={{ color: "pink.50" }} size={300} />
</Row>

Note

It is recommended to use semantic colors whenever possible, as they are named for their purpose and represent the design system’s intent.