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<{ '0px': string; '1px': string; '1.5px': string; '2px': string; '3px': string; '4px': string; '8px': 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<{ '0px': string; '1px': string; '1.5px': string; '2px': string; '3px': string; '4px': string; '8px': 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<{ '0px': string; '1px': string; '1.5px': string; '2px': string; '3px': string; '4px': string; '8px': 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<{ '0px': string; '1px': string; '1.5px': string; '2px': string; '3px': string; '4px': string; '8px': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
borderWidth | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '1.5px': string; '2px': string; '3px': string; '4px': string; '8px': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>> | - | - |
bottom | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ '448px': string; '512px': string; '576px': string; '672px': string; '720px': string; '768px': string; '896px': string; '976px': string; '1024px': string; '1152px': string; '1280px': string; '1/4': string; '1/3': string; '1/2': string; ... 52 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<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
height | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
inset | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginBottom | ConditionalStyle<Values<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginLeft | ConditionalStyle<Values<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginRight | ConditionalStyle<Values<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginTop | ConditionalStyle<Values<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginX | ConditionalStyle<Values<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
marginY | ConditionalStyle<Values<{ "-1px": string; "-2px": string; "-4px": string; "-6px": string; "-8px": string; "-10px": string; "-12px": string; "-14px": string; "-16px": string; '0px': CSSVarFunction; '1px': CSSVarFunction; ... 44 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
maxHeight | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
maxWidth | ConditionalStyle<Values<{ none: "none"; '448px': string; '512px': string; '576px': string; '672px': string; '720px': string; '768px': string; '896px': string; '976px': string; '1024px': string; '1152px': string; '1280px': string; '1/4': string; '1/3': string; ... 52 more ...; viewWidth: CSSVarFunction; }, { ...; }>> | - | - |
minHeight | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
minWidth | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
paddingBottom | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
paddingLeft | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
paddingRight | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
paddingTop | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
paddingX | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
paddingY | ConditionalStyle<Values<MapLeafNodes<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
strokeWidth | "0px" | "1px" | "1.5px" | "2px" | "3px" | "4px" | "8px" | - | - |
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<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ '448px': string; '512px': string; '576px': string; '672px': string; '720px': string; '768px': string; '896px': string; '976px': string; '1024px': string; '1152px': string; '1280px': string; '1/4': string; '1/3': string; '1/2': string; ... 52 more ...; none: CSSVarFunction; }, { ...; }>> | - | - |
wordBreak | "break-word" | - | - |
wordWrap | "inherit" | "initial" | "normal" | "break-word" | - | - |
zIndex | "auto" | "0" | "50" | "100" | "10" | "20" | "30" | "40" | "75" | - | - |