Box
Intro
Box er en av våre layout primitives. Det er en layout-komponent som ofte brukes som byggestein for andre komponenter. Den setter padding, border, background etc. med design tokens.
Eksempler
Propen 'background' lar deg sette bakgrunnsfarge basert på tokens.
Propen 'padding' lar deg sette padding responsivt basert på brekkpunkt. Verdien mapper til tokens, så f.eks. '4' tilsvarer '--a-spacing-4' som er '1rem'.
Propen 'paddingInline' gir deg mer kontroll over horisontal padding.
Propen 'paddingBlock' gir deg mer kontroll over vertikal padding.
Propen 'borderWidth' gir deg kontroll over border.
Propen 'borderColor' lar deg endre border-color basert på tokens.
Propen 'borderRadius' lar deg sette border-radius basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.
Propen 'shadow' lar deg sette box-shadow basert på tokens.
Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt.
Box erstatter den avviklede komponenten Panel.
Tilgjengelighet
Box er ikke en erstatning for semantisk HTML. Bruk as-prop aktivt. Støtter OverridableComponent.
Props
Box
as?
- Type:
React.ElementType - Description:
background?
- Type:
LegacyBgColorKeys | LegacySurfaceColorKeys - Description:
borderColor?
- Type:
LegacyBorderColorKeys - Description:
borderRadius?
- Type:
ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">> - Description:
- Example:
borderWidth?
- Type:
SpaceDelimitedAttribute<"2" | "4" | "0" | "1" | "3" | "5"> - Description:
- Example:
shadow?
- Type:
LegacyShadowKeys - Description:
- Example:
padding?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1827 more ... | "space-128 space-128"> - Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1827 more ... | "space-128 space-128"> - Description:
- Example:
margin?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
marginInline?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1914 more ... | "space-128 auto"> - Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1914 more ... | "space-128 auto"> - Description:
- Example:
width?
- Type:
ResponsiveProp<string> - Description:
minWidth?
- Type:
ResponsiveProp<string> - Description:
maxWidth?
- Type:
ResponsiveProp<string> - Description:
height?
- Type:
ResponsiveProp<string> - Description:
minHeight?
- Type:
ResponsiveProp<string> - Description:
maxHeight?
- Type:
ResponsiveProp<string> - Description:
position?
- Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky"> - Description:
inset?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1827 more ... | "space-128 space-128"> - Description:
- Example:
top?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
right?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
bottom?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
left?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
overflow?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
overflowX?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
overflowY?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
flexBasis?
- Type:
ResponsiveProp<string> - Description:
flexShrink?
- Type:
ResponsiveProp<string> - Description:
flexGrow?
- Type:
ResponsiveProp<string> - Description:
gridColumn?
- Type:
ResponsiveProp<string> - Description:
asChild?
- Type:
boolean - Description:
- Example:
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
BoxNew (darkside)
as?
- Type:
React.ElementType - Description:
background?
- Type:
StaticDefaultBgKeys | StaticBgKeys - Description:
borderColor?
- Type:
BorderColorWithRoleKeys - Description:
borderRadius?
- Type:
ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">> - Description:
- Example:
borderWidth?
- Type:
SpaceDelimitedAttribute<"2" | "4" | "0" | "1" | "3" | "5"> - Description:
- Example:
shadow?
- Type:
"dialog" - Description:
- Example:
padding?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1827 more ... | "space-128 space-128"> - Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1827 more ... | "space-128 space-128"> - Description:
- Example:
margin?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
marginInline?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1914 more ... | "space-128 auto"> - Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1914 more ... | "space-128 auto"> - Description:
- Example:
width?
- Type:
ResponsiveProp<string> - Description:
minWidth?
- Type:
ResponsiveProp<string> - Description:
maxWidth?
- Type:
ResponsiveProp<string> - Description:
height?
- Type:
ResponsiveProp<string> - Description:
minHeight?
- Type:
ResponsiveProp<string> - Description:
maxHeight?
- Type:
ResponsiveProp<string> - Description:
position?
- Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky"> - Description:
inset?
- Type:
ResponsiveProp<"2 2" | "2 4" | "2 8" | "2 12" | "2 0" | "4 2" | "4 4" | "4 8" | "4 12" | "4 0" | "8 2" | "8 4" | "8 8" | "8 12" | "8 0" | "12 2" | "12 4" | "12 8" | "12 12" | "12 0" | "0 2" | "0 4" | ... 1827 more ... | "space-128 space-128"> - Description:
- Example:
top?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
right?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
bottom?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
left?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
overflow?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
overflowX?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
overflowY?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
flexBasis?
- Type:
ResponsiveProp<string> - Description:
flexShrink?
- Type:
ResponsiveProp<string> - Description:
flexGrow?
- Type:
ResponsiveProp<string> - Description:
gridColumn?
- Type:
ResponsiveProp<string> - Description:
asChild?
- Type:
boolean - Description:
- Example:
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tokens
Tokens brukt internt i Box bør ikke overskrives.