Box

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