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 styled 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

Responsive styles#

You can pass breakpoints from the theme as responsive attributes inside your style props to apply the style for a particular viewport.

In this example, the background of the box will bed red until the max desktop width is reached. It will then fallback to the default.

This is a box

Editable example

<Box
  backgroundColor={{
    default: 'primary',
    'max-desktop': 'red'
  }}
  color="white"
>
  This is a box
</Box>

<Box
  backgroundColor={{
    default: 'primary',
    'max-desktop': 'red'
  }}
  color="white"
>
  This is a box
</Box>

Pseudo styles#

style props allow you to specify certain pseudo selectors. This allows you to add adhoc styling for particular interactions.

The available pseudo selectors you can use are:

_hover for :hover
_active for :active
_hoveractive for :hover:active
_focus for :focus
_visited for :visited

This is a box

Editable example

<Box
  _hover={{ backgroundColor: 'primary', color: 'white' }}
  _active={{ backgroundColor: 'primary300', color: 'white' }}
  _focus={{ outline: '2px solid blue' }}
  tabIndex="-1"
  role="button"
  backgroundColor="primaryTint"
  color="primary800"
  padding="major-2"
>
  This is a box
</Box>

<Box
  _hover={{ backgroundColor: 'primary', color: 'white' }}
  _active={{ backgroundColor: 'primary300', color: 'white' }}
  _focus={{ outline: '2px solid blue' }}
  tabIndex="-1"
  role="button"
  backgroundColor="primaryTint"
  color="primary800"
  padding="major-2"
>
  This is a box
</Box>

On this page