Hopp til innhold
Aksel

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

className?

  • Type:
    string

background?

  • Type:
    AkselRootBackgroundToken | AkselDynamicStatelessBackgroundToken | "neutral-soft" | "neutral-softA" | ... 53 more ...
  • Description:

    CSS background-color property. Accepts a background color token. @see {@link AkselRootBackgroundToken }, {@link AkselColoredStatelessBackgroundToken } and {@link AkselDynamicStatelessBackgroundToken }

borderColor?

  • Type:
    AkselColoredBorderToken
  • Description:

    CSS border-color property. Accepts a border color token. @see {@link AkselColoredBorderToken }

borderRadius?

  • Type:
    ResponsiveProp<SpaceDelimitedAttribute<AkselBorderRadiusToken | "0">>
  • Description:

    CSS border-radius property. Accepts a radius token or an object of radius tokens for different breakpoints. @see {@link BorderRadiusScale }

  • 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:
    "dialog"
  • Description:

    Shadow on box. Accepts a shadow token. @see {@link ShadowKeys }

  • Example:
    shadow='small'

padding?

  • Type:
    ResponsiveProp<AkselSpaceToken>
  • 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken>
  • 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<"auto" | AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 520 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<"auto" | AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 520 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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.

  • Example:
    <Component asChild data-prop>
      <ChildComponent data-child />
    </Component>
    

    // Renders
    <div data-prop data-child />

ref?

  • Type:
    Ref<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)

className?

  • Type:
    string

background?

  • Type:
    AkselRootBackgroundToken | AkselDynamicStatelessBackgroundToken | "neutral-soft" | "neutral-softA" | ... 53 more ...
  • Description:

    CSS background-color property. Accepts a background color token. @see {@link AkselRootBackgroundToken }, {@link AkselColoredStatelessBackgroundToken } and {@link AkselDynamicStatelessBackgroundToken }

borderColor?

  • Type:
    AkselColoredBorderToken
  • Description:

    CSS border-color property. Accepts a border color token. @see {@link AkselColoredBorderToken }

borderRadius?

  • Type:
    ResponsiveProp<SpaceDelimitedAttribute<AkselBorderRadiusToken | "0">>
  • Description:

    CSS border-radius property. Accepts a radius token or an object of radius tokens for different breakpoints. @see {@link BorderRadiusScale }

  • 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:
    "dialog"
  • Description:

    Shadow on box. Accepts a shadow token. @see {@link ShadowKeys }

  • Example:
    shadow='small'

padding?

  • Type:
    ResponsiveProp<AkselSpaceToken>
  • 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken>
  • 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<"auto" | AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 520 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<"auto" | AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 520 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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.

  • Example:
    <Component asChild data-prop>
      <ChildComponent data-child />
    </Component>
    

    // Renders
    <div data-prop data-child />

ref?

  • Type:
    Ref<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.