Komponenter

Box

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.

StabilOppdatert 9. mai 2025

Github Endringslogg

Egnet til:

Enkle statiske containers med begrenset styling.
Wrapper for mer komplekse komponenter.

Eksempler

Tilgjengelighet

Box er ikke en erstatning for semantisk HTML. Bruk as-prop aktivt. Støtter OverridableComponent.

TSX

<Box as="nav">
  // Sidebar
<Box>

Props

Box

data-color?: Type:
(string & {}) | AkselColor
background?: Type:
AkselLegacyBackgroundColorToken | AkselLegacySurfaceColorToken
Description:
CSS background-color property. Accepts a background/surface color token.
borderColor?: Type:
AkselLegacyBorderColorToken
Description:
CSS border-color property. Accepts a border color token.
borderRadius?: Type:
ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>
Description:
CSS border-radius property. Accepts a radius token or an object of radius tokens for different breakpoints.
Example:
borderRadius='full'borderRadius='0 full 12 2'borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
borderWidth?: Type:
SpaceDelimitedAttribute<"2" | "4" | "0" | "1" | "3" | "5">
Description:
CSS border-width property. If this is not set there will be no border.
Example:
borderWidth='2'borderWidth='1 2 3 4'
shadow?: Type:
AkselLegacyShadowToken
Description:
Shadow on box. Accepts a shadow token.
Example:
shadow='small'
padding?: Type:
ResponsiveProp<SpacingScale>
Description:
Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
padding='space-16'padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
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:
Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
paddingInline='space-16'paddingInline='space-16 space-20'paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
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:
Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
paddingBlock='space-16'paddingBlock='space-16 space-20'paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
margin?: Type:
ResponsiveProp<SpacingScale>
Description:
Margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
margin='space-16'margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
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:
Horizontal margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
marginInline='space-16'marginInline='space-16 space-20'marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
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:
Vertical margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
marginBlock='space-16'marginBlock='space-16 space-20'marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
width?: Type:
ResponsiveProp<string>
Description:
CSS width
minWidth?: Type:
ResponsiveProp<string>
Description:
CSS min-width
maxWidth?: Type:
ResponsiveProp<string>
Description:
CSS max-width
height?: Type:
ResponsiveProp<string>
Description:
CSS height
minHeight?: Type:
ResponsiveProp<string>
Description:
CSS min-height
maxHeight?: Type:
ResponsiveProp<string>
Description:
CSS max-height
position?: Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
Description:
CSS position
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:
CSS inset. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
inset='space-16'inset='space-16 space-20'inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
top?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS top Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
top='space-16'top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
right?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS right Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
right='space-16'right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
bottom?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS bottom Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
bottom='space-16'bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
left?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS left Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
left='space-16'left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
overflow?: Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
Description:
CSS overflow
overflowX?: Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
Description:
CSS overflow-x
overflowY?: Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
Description:
CSS overflow-y
flexBasis?: Type:
ResponsiveProp<string>
Description:
CSS flex-basis
flexShrink?: Type:
ResponsiveProp<string>
Description:
CSS flex-shrink
flexGrow?: Type:
ResponsiveProp<string>
Description:
CSS flex-grow
gridColumn?: Type:
ResponsiveProp<string>
Description:
CSS grid-column
asChild?: Type:
boolean
Description:
Renders the component and its child as a single element, merging the props of the component with the props of the child.

// Renders
<div data-prop data-child /> ``` @example ```tsx <Component asChild data-prop> <ChildComponent data-child /> </Component>
// Renders
<div data-prop data-child /> ```
Example:
```tsx<Component asChild data-prop> <ChildComponent data-child /></Component>
ref?: Type:
LegacyRef<HTMLDivElement>
Description:
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). React Docs
as?: Type:
React.ElementType
Description:
OverridableComponent-api

BoxNew (darkside)

data-color?: Type:
(string & {}) | AkselColor
background?: Type:
AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken
Description:
CSS background-color property. Accepts a background/surface color token. @see {@link StaticDefaultBgKeys } and {@link StaticBgKeys }
borderColor?: Type:
AkselColoredBorderToken
Description:
CSS border-color property. Accepts a border color token. @see {@link BorderColorKeys } and {@link BorderColorWithRoleKeys }
borderRadius?: Type:
ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>
Description:
CSS border-radius property. Accepts a radius token or an object of radius tokens for different breakpoints.
Example:
borderRadius='full'borderRadius='0 full 12 2'borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}@see {@link BorderRadiusKeys }
borderWidth?: Type:
SpaceDelimitedAttribute<"2" | "4" | "0" | "1" | "3" | "5">
Description:
CSS border-width property. If this is not set there will be no border.
Example:
borderWidth='2'borderWidth='1 2 3 4'
shadow?: Type:
"dialog"
Default:
"null"
Description:
Shadow on box. Accepts a shadow token.
Example:
shadow='small'@see {@link ShadowKeys }
padding?: Type:
ResponsiveProp<SpacingScale>
Description:
Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
padding='space-16'padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
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:
Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
paddingInline='space-16'paddingInline='space-16 space-20'paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
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:
Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
paddingBlock='space-16'paddingBlock='space-16 space-20'paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
margin?: Type:
ResponsiveProp<SpacingScale>
Description:
Margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
margin='space-16'margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
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:
Horizontal margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
marginInline='space-16'marginInline='space-16 space-20'marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
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:
Vertical margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
marginBlock='space-16'marginBlock='space-16 space-20'marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
width?: Type:
ResponsiveProp<string>
Description:
CSS width
minWidth?: Type:
ResponsiveProp<string>
Description:
CSS min-width
maxWidth?: Type:
ResponsiveProp<string>
Description:
CSS max-width
height?: Type:
ResponsiveProp<string>
Description:
CSS height
minHeight?: Type:
ResponsiveProp<string>
Description:
CSS min-height
maxHeight?: Type:
ResponsiveProp<string>
Description:
CSS max-height
position?: Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
Description:
CSS position
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:
CSS inset. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
inset='space-16'inset='space-16 space-20'inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
top?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS top Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
top='space-16'top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
right?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS right Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
right='space-16'right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
bottom?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS bottom Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
bottom='space-16'bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
left?: Type:
ResponsiveProp<SpacingScale>
Description:
CSS left Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
left='space-16'left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
overflow?: Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
Description:
CSS overflow
overflowX?: Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
Description:
CSS overflow-x
overflowY?: Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
Description:
CSS overflow-y
flexBasis?: Type:
ResponsiveProp<string>
Description:
CSS flex-basis
flexShrink?: Type:
ResponsiveProp<string>
Description:
CSS flex-shrink
flexGrow?: Type:
ResponsiveProp<string>
Description:
CSS flex-grow
gridColumn?: Type:
ResponsiveProp<string>
Description:
CSS grid-column
asChild?: Type:
boolean
Description:
Renders the component and its child as a single element, merging the props of the component with the props of the child.

// Renders
<div data-prop data-child /> ``` @example ```tsx <Component asChild data-prop> <ChildComponent data-child /> </Component>
// Renders
<div data-prop data-child /> ```
Example:
```tsx<Component asChild data-prop> <ChildComponent data-child /></Component>
ref?: Type:
LegacyRef<HTMLDivElement>
Description:
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). React Docs
as?: Type:
React.ElementType
Description:
OverridableComponent-api

Tokens

Tokens brukt internt i Box bør ikke overskrives.

Box

Egnet til:

Eksempler

Tilgjengelighet

Props

Box

data-color?

background?

borderColor?

borderRadius?

borderWidth?

shadow?

padding?

paddingInline?

paddingBlock?

margin?

marginInline?

marginBlock?

width?

minWidth?

maxWidth?

height?

minHeight?

maxHeight?

position?

inset?

top?

right?

bottom?

left?

overflow?

overflowX?

overflowY?

flexBasis?

flexShrink?

flexGrow?

gridColumn?

asChild?

ref?

as?