Box

Primitive for consuming design tokens

You can use the Box primitive to create a DOM element that applies any of the available design tokens.

React.AllHTMLAttributes properties are supported, but not listed below for brevity.

<Box>

import { Box } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
alignSelf
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
ElementType<any>
div
backgroundColor
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
borderBottomLeftRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderBottomRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderBottomRightRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderBottomStyle
ConditionalStyle<Values<MapLeafNodes<{ none: string; solid: string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderBottomWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderColor
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
borderLeftRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderLeftWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderRightRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderRightWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderStyle
ConditionalStyle<Values<MapLeafNodes<{ none: string; solid: string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderTopLeftRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderTopRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderTopRightRadius
ConditionalStyle<Values<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, CSSVarFunction>, { ...; }>>
-
borderTopStyle
ConditionalStyle<Values<MapLeafNodes<{ none: string; solid: string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderTopWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
bottom
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
boxShadow
ConditionalStyle<Values<{ none: { boxShadow: "none"; }; small: { boxShadow: CSSVarFunction; }; medium: { boxShadow: CSSVarFunction; }; large: { boxShadow: CSSVarFunction; }; }, { ...; }>>
-
className
ClassValue
-
color
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
cursor
"default" | "not-allowed" | "pointer"
-
display
ConditionalStyle<Values<("none" | "block" | "flex" | "grid" | "inline-block" | "inline-flex" | "contents")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flex
ConditionalStyle<Values<{ 1: "1 1 0%"; auto: "1 1 auto"; initial: "0 1 auto"; none: "none"; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexBasis
ConditionalStyle<Values<{ screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; 0: CSSVarFunction; 1: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
flexDirection
ConditionalStyle<Values<("column" | "row")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexGrow
ConditionalStyle<Values<readonly [0, 1, 2, 3, 4], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexShrink
ConditionalStyle<Values<readonly [0, 1, 2, 3, 4], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexWrap
ConditionalStyle<Values<("nowrap" | "wrap")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
fontFamily
"mono" | "sans"
-
fontSize
ConditionalStyle<Values<{ inherit: "inherit"; headingOne: CSSVarFunction; headingTwo: CSSVarFunction; headingThree: CSSVarFunction; extraLarge: CSSVarFunction; ... 4 more ...; root: CSSVarFunction; }, { ...; }>>
-
fontWeight
ConditionalStyle<Values<MapLeafNodes<{ light: string; normal: string; medium: string; semiBold: string; bold: string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
gap
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
height
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
inset
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
justifySelf
ConditionalStyle<Values<readonly ["flex-start", "center", "flex-end", "stretch"], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
left
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
letterSpacing
ConditionalStyle<Values<MapLeafNodes<{ '-0.02': string; '-0.015': string; '-0.01': string; normal: string; '0.03': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
lineHeight
ConditionalStyle<Values<MapLeafNodes<{ normal: string; none: string; '1.25': string; '1.375': string; '1.5': string; '1.625': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
margin
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
marginBottom
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
marginLeft
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
marginRight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
marginTop
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
marginX
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
marginY
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
maxHeight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
maxWidth
ConditionalStyle<Values<{ none: "none"; screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; 0: CSSVarFunction; ... 20 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
minHeight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
minWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
opacity
"0" | "25" | "50" | "75" | "100"
-
outlineColor
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
overflow
ConditionalStyle<Values<("unset" | "auto" | "hidden" | "scroll")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
padding
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
paddingBottom
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
paddingLeft
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
paddingRight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
paddingTop
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
paddingX
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
paddingY
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
pointerEvents
"none"
-
position
ConditionalStyle<Values<("absolute" | "fixed" | "relative" | "sticky")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
ref
Ref<HTMLElement>
-
right
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
strokeWidth
"1" | "0" | "2" | "3" | "4" | "5"
-
textAlign
ConditionalStyle<Values<("center" | "left" | "right")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
textTransform
"capitalize" | "lowercase" | "uppercase"
-
top
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
-
transitionDuration
ConditionalStyle<Values<MapLeafNodes<{ '150': string; '300': string; '600': string; '3000': string; }, CSSVarFunction>, { defaultClass: string; conditions: { base: string; }; }>>
-
transitionProperty
"opacity" | "transform" | "all" | "none" | "colors" | "default" | "shadow"
-
transitionTimingFunction
"linear" | "in" | "out" | "inOut"
-
visibility
"hidden" | "visible"
-
whiteSpace
"inherit" | "initial" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"
-
width
ConditionalStyle<Values<{ screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; 0: CSSVarFunction; 1: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
wordBreak
"break-word"
-
wordWrap
"inherit" | "initial" | "normal" | "break-word"
-
zIndex
"auto" | "0" | "50" | "75" | "100" | "10" | "20" | "30" | "40"
-