Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

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
GithubEndringslogg

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.