Style props#

You're able to apply any CSS attribute as a prop to <Box>. These attributes can be passed through as camel-cased props. style props can be very useful when you just want to apply an adhoc style without pulling it out into it's own themeable component.

Editable example

<Box
  backgroundColor="blue"
  height="50px"
  width="50px"
/>

<Box
  backgroundColor="blue"
  height="50px"
  width="50px"
/>

Colors#

You can specify a color from the palette with any color-based CSS attribute.

Hello world

Editable example

<Box backgroundColor="primary" color="primaryTint">Hello world</Box>

<Box backgroundColor="primary" color="primaryTint">Hello world</Box>

Reference#

Theme reference: theme.palette

Style props: color, backgroundColor, borderBlockEndColor, borderBlockStartColor, borderBottomColor, borderColor, borderInlineEndColor, borderInlineStartColor, borderLeftColor, borderRightColor, borderTopColor, borderBottomColor, caretColor, columnRuleColor, outlineColor, textDecorationColor, textEmphasisColor

Spacing#

You can specify a spacing from the theme for margins & paddings.

Hello world

Editable example

<Box
  padding="major-2"
  backgroundColor="primary"
  color="white"
>
  Hello world
</Box>

<Box
  padding="major-2"
  backgroundColor="primary"
  color="white"
>
  Hello world
</Box>

There are also paddingX, paddingY, marginX and marginY props to specify padding or margin in a particular direction.

Hello world

Editable example

<Box
  paddingY="major-2"
  paddingX="major-4"
  backgroundColor="primary"
  color="white"
>
  Hello world
</Box>

<Box
  paddingY="major-2"
  paddingX="major-4"
  backgroundColor="primary"
  color="white"
>
  Hello world
</Box>

Reference#

Theme reference: theme.spacing

Style props: margin, marginLeft, marginRight, marginTop, marginBottom, marginX, marginY, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingX, paddingY, top, left, bottom, right, height, width, minWidth, minHeight, maxWidth, maxHeight

Fonts & typography#

You can specify a font size from the theme for font sizes.

Hello world

Editable example

<Text fontSize="400">Hello world</Text>

<Text fontSize="400">Hello world</Text>

You can specify a font weight from the theme for font weights.

Hello world

Editable example

<Text fontWeight="semibold">Hello world</Text>

<Text fontWeight="semibold">Hello world</Text>

You can specify a font family from the theme for font families.

Hello world

Editable example

<Text fontFamily="Comic Sans MS">Hello world</Text>

<Text fontFamily="Comic Sans MS">Hello world</Text>

You can specify a letter spacing from the theme for letter spacings.

Hello world

Editable example

<Text letterSpacing="100">Hello world</Text>

<Text letterSpacing="100">Hello world</Text>

You can specify a line height from the theme for line heights.

Hello
world

Editable example

<Text lineHeight="100">Hello<br/>world</Text>

<Text lineHeight="100">Hello<br/>world</Text>

Reference#

Font family#

Theme reference: theme.fonts

Style props: font, fontFamily

Font weight#

Theme reference: theme.fontWeights

Style props: fontWeight

Font size#

Theme reference: theme.fontSizes

Style props: fontSize

Letter spacing#

Theme reference: theme.letterSpacings

Style props: letterSpacing

Line height#

Theme reference: theme.lineHeights

Style props: lineHeight

Alignment#

Hello world

Editable example

<Box alignX="right">Hello world</Box>

<Box alignX="right">Hello world</Box>

Reference#

Style props: alignX, alignY

Altitude#

You can specify an altitude from the theme.

Hello world

Editable example

<Box altitude="400">Hello world</Box>

<Box altitude="400">Hello world</Box>

Reference#

Theme reference: theme.altitudes

Style props: altitude

Borders#

You can specify a border from the theme.

Hello world

Editable example

<Box border="default">Hello world</Box>

<Box border="default">Hello world</Box>

Reference#

Theme reference: theme.borders

Style props: border, borderLeft, borderRight, borderTop, borderBottom

Border radius#

You can specify a border radius from the theme.

Hello world

Editable example

<Box borderRadius="5" border="default">Hello world</Box>

<Box borderRadius="5" border="default">Hello world</Box>

Reference#

Theme reference: theme.borderRadii

Style props: borderRadius, borderLeftRadius, borderRightRadius, borderTopRadius, borderBottomRadius, borderTopLeftRadius, borderBottomLeftRadius, borderTopRightRadius, borderBottomRightRadius

On this page