Box is the lowest-level component for binding theme-based styles to an individual element on the screen. Internally, all Braid components are made up of Boxes.
All elements rendered via Box are provided with a CSS reset to ensure that elements only have styling rules that have been explicitly specified.
By default, Box renders a div element. You can customise this via the component prop. Non-Braid props will also be forwarded to the underlying element.
<Box component="span" aria-hidden>
  ...
</Box>
The className prop supports the full Classnames API.
<Box className={[styles.firstClass, styles.secondClass, styles.thirdClass]}>
  ...
</Box>
Box provides a suite of common CSS utility props. Styles that regularly differ across screen sizes can also be expressed as responsive props, e.g. justifyContent={['center', 'flexStart']}
These utilities are recommended where possible to reduce the amount of custom CSS in your application.
<Box
  display="flex"
  justifyContent={["center", "flexStart"]}
  position="absolute"
  top={0}
  left={0}
  width="full"
  height="full"
>
  ...
</Box>
alignItems (Responsive)
"center", "flexEnd", "flexStart"
bottom
0
borderRadius (Responsive)
"full", "none", "standard"
cursor
"default", "pointer"
display (Responsive)
"block", "flex", "inline", "inlineBlock", "none"
flexDirection (Responsive)
"column", "columnReverse", "row", "rowReverse"
flexGrow
0, 1
flexShrink
0
flexWrap
"nowrap", "wrap"
height
"full", "touchable"
justifyContent (Responsive)
"center", "flexEnd", "flexStart", "spaceBetween"
left
0
maxWidth
"large", "medium", "small", "xsmall"
minWidth
0
opacity
0
outline
"none"
overflow
"auto", "hidden", "scroll", "visible"
pointerEvents
"none"
position
"absolute", "fixed", "relative"
right
0
textAlign (Responsive)
"center", "left", "right"
top
0
transform
"touchable"
transition
"fast", "touchable"
userSelect
"none"
width
"full", "touchable"
zIndex
0, 1, 2, "dropdown", "dropdownBackdrop", "modal", "modalBackdrop", "notification", "sticky"
Padding can be applied in all directions using our space scale. Margin is also supported with the same syntax, but padding is recommended over margin in most cases to avoid issues with collapsing margins.
<Box paddingX="gutter" paddingY="large">
  ...
</Box>
padding
paddingX
paddingY
paddingTop
paddingRight
paddingBottom
paddingLeft
Padding and margins can also differ across screen sizes by providing an array of responsive values, e.g. ['small', 'medium', 'large']
Responsive padding
Box provides a series of semantic backgrounds, meaning that they are named based on their desired usage rather than what they happen to look like. This is what allows us to change colours in radically different ways across our suite of themes.
<Box background="brand">...</Box>
body
Used for elements that need to match the body background.
brand
Used for branding larger areas of the screen.
brandAccent
Used for hero elements on the screen.
brandAccentHover
Hover colour for “brandAccent” elements.
brandAccentActive
Hover colour for “brandAccent” elements.
formAccent
Used for prominent interactive elements, typically within a form.
formAccentHover
Hover colour for “formAccent” elements.
formAccentActive
Active colour for “formAccent” elements.
formAccentDisabled
Disabled colour for “formAccent” elements.
input
Used for input fields.
inputDisabled
Used for input fields when disabled.
card
Used for card surfaces.
selection
Used for user selections, e.g. selected item in an Autosuggest.
positive
Used for heavier “positive” elements.
positiveLight
Used for lighter “positive” elements.
critical
Used for heavier “critical” elements.
criticalLight
Used for lighter “critical” elements.
criticalHover
Hover colour for “critical” elements.
criticalActive
Active colour for “critical” elements.
caution
Used for heavier “caution” elements.
cautionLight
Used for lighter “caution” elements.
info
Used for heavier “info” elements.
infoLight
Used for lighter “info” elements.
promote
Used for heavier “promote” elements.
promoteLight
Used for lighter “promote” elements.
neutral
Used for heavier “neutral” elements.
neutralLight
Used for lighter “neutral” elements.
Box provides a series of boxShadow values that handle a wide variety of use cases. Note that box shadows are also used for outlines and borders so that their presence doesn’t alter the dimensions of the element.
<Box boxShadow="large">...</Box>
small
Used for small shadows.
medium
Used for medium shadows.
large
Used for large shadows.
borderStandard
Used for neutral element borders.
borderStandardInverted
Used for standard borders on dark backgrounds.
borderStandardInvertedLarge
Used for large standard borders on dark backgrounds.
borderField
Used for borders around form fields.
borderFormHover
Used for borders around form fields on hover.
outlineFocus
Used for focus states of interactive elements.
borderFormAccent
Used for borders around prominent interactive elements.
borderFormAccentLarge
Used for large borders around prominent interactive elements.
borderBrandAccentLarge
Used for large borders around branded elements.
borderPositive
Used for borders around “positive” elements.
borderCritical
Used for borders around “critical” elements.
borderCriticalLarge
Used for large borders around “critical” elements.
borderCaution
Used for borders around “caution” elements.
borderInfo
Used for borders around “info” elements.
borderPromote
Used for borders around “promote” elements.