Box
Primitive for consuming design tokens
import { Box } from 'degen'
React.AllHTMLAttributes properties are supported, but not listed below for brevity.
name | type | default | description |
|---|---|---|---|
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 | - |
aspectRatio | "auto" | "1/1" | "2/1" | "4/1" | "4/3" | "16/9" | - | - |
backgroundColor | ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | - | - |
borderBottomLeftRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderBottomRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderBottomRightRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderBottomWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
borderColor | ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | - | - |
borderLeftRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderLeftWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
borderRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderRightRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderRightWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
borderTopLeftRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderTopRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderTopRightRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | - | - |
borderTopWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
borderWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
bottom | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
boxShadow | ConditionalStyle<Values<{ '1': { vars: { [x: string]: CSSVarFunction; }; boxShadow: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${... | - | - |
boxShadowColor | ConditionalStyle<Values<{ foregroundSecondary: { vars: { [x: string]: CSSVarFunction; }; }; transparent: { vars: { [x: string]: CSSVarFunction; }; }; }, { defaultClass: string; conditions: { ...; }; }>> | - | - |
className | ClassValue | - | - |
color | ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | - | - |
cursor | "default" | "not-allowed" | "pointer" | - | - |
display | ConditionalStyle<Values<("none" | "flex" | "grid" | "block" | "contents" | "inline-block")[], { 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<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '244': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; ... 50 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
flexDirection | ConditionalStyle<Values<("column" | "column-reverse" | "row" | "row-reverse")[], { 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; ... 5 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; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
height | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
inset | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
isolation | "isolate" | - | - |
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; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
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<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginBottom | ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginLeft | ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginRight | ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginTop | ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginX | ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginY | ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; '0': CSSVarFunction; px: CSSVarFunction; '0.5': CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
maxHeight | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
maxWidth | ConditionalStyle<Values<{ none: "none"; '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '244': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; ... 50 more ...; viewWidth: CSSVarFunction; }, { ...... | - | - |
minHeight | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
minWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
objectFit | "contain" | "cover" | - | - |
opacity | "0" | "50" | "100" | - | - |
outlineColor | ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | - | - |
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; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
paddingBottom | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
paddingLeft | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
paddingRight | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
paddingTop | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
paddingX | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
paddingY | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
pointerEvents | "none" | - | - |
position | ConditionalStyle<Values<("fixed" | "absolute" | "relative" | "sticky")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>> | - | - |
ref | Ref<HTMLElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
reset | "button" | "textarea" | "table" | "menu" | "input" | "a" | "article" | "aside" | "blockquote" | "body" | "details" | "div" | "figcaption" | "figure" | "footer" | "header" | "hgroup" | ... 6 more ... | "ul" | - | - |
right | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
strokeWidth | "0" | "1" | "2" | "0.5" | "px" | "0.375" | "0.75" | - | - |
textAlign | ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>> | - | - |
textTransform | "capitalize" | "lowercase" | "uppercase" | - | - |
top | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
transitionDuration | ConditionalStyle<Values<{ '75': "75ms"; '100': "100ms"; '150': "150ms"; '200': "200ms"; '300': "300ms"; '500': "500ms"; '700': "700ms"; '1000': "1000ms"; }, { defaultClass: string; conditions: { base: string; }; }>> | - | - |
transitionProperty | "none" | "opacity" | "transform" | "all" | "default" | "colors" | "shadow" | - | - |
transitionTimingFunction | "linear" | "in" | "out" | "inOut" | - | - |
visibility | "hidden" | "visible" | - | - |
whiteSpace | "inherit" | "initial" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | - | - |
width | ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '244': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; ... 50 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
wordBreak | "break-word" | - | - |
wordWrap | "inherit" | "initial" | "normal" | "break-word" | - | - |
zIndex | "auto" | "0" | "50" | "100" | "10" | "20" | "40" | "30" | "75" | - | - |