Hopp til innhold
Aksel

Grunnleggende

Komponent-API

StabilOppdatert 7. mai 2026

asChild-propen

Noen komponenter (blant annet de fleste primitives) støtter asChild-propen. Den kan brukes til å slå sammen DOM-noder. Klasser, stiler og event-handlers slås da sammen. Dette kan være nyttig for å forenkle DOM-en, men gjør det også mulig å løse noe layout enklere. For at dette skal fungere må child kunne ta inn className og style som props.

TSX
// React
<Box asChild background="...">
  <HStack gap="space-16">
    <div />
    <div />
  </HStack>
</Box>


// HTML output
<div class="box hstack">
  <div />
  <div />
</div>

as-propen (OverridableComponent)

Mange av komponentene i Aksel er implementert med OverridableComponent. Dette API-et gjør det enkelt å overstyre hvilken komponent eller tag den rendres med.

Et vanlig eksempel på dette er når routeren din har sin egen Link-komponent, men du ønsker stylingen til Aksel sin Link-komponent. Da kan du bruke as-propen som vist under. Prop-typene slås sammen, og ved overlapp er det Aksel som tar presedens.

TSX
<Link as={Router.Link} to="/about">About</Link>

Extende komponenter

For å få riktige props ved extension av komponenter med OverridableComponent-API, må man bruke typeof <komponentnavn>

TSX
const CustomButton = (props: React.ComponentPropsWithRef<typeof Button>) => {
  ... custom code
  <Button {...props} />
}

Styled-components

Flere CSS-in-JS-biblioteker bruker også et as-attributt for å overstyre tag eller komponent, noe som kan komplisere ting når man for eksempel bruker styled-components for å style en komponent fra Aksel.

For styled-components kan man bruke forwardedAs i stedet for as på komponentene.

Layout primitives

Primitives er komponenter som hjelper deg med å lage layout, uten å måtte skrive egen CSS. Komponentene bruker våre design tokens i props der det er relevant.

ResponsiveProp

En av grunnpilarene til våre layout primitives er typen ResponsiveProp. Typen gjør det mulig å sette prop-verdien basert på brekkpunkt. Dette lar deg eksempelvis endre gap basert på skjermbredde:

TS
type ResponsiveProp<T> = T | {
  [Breakpoint in "xs" | "sm" | "md" | "lg" | "xl" | "2xl"]?: T;
};
TSX
// Statisk gap
<HStack gap="space-16">
   ...
</HStack>


// Dynamisk gap
<HStack gap={{xs: "space-8", md: "space-16"}}>
   ...
</HStack>

BasePrimitive

Komponentene HGrid, Box, HStack, VStack og Stack arver fra en base-type som har de mest brukte størrelses- og posisjons-attributtene i CSS. I props som har med avstander å gjøre, må du bruke verdier basert på tokens fra Aksel. F.eks. padding="space-16" gir --ax-space-16 som tilsvarer 1rem.

BasePrimitiveType

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<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" | ... 521 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<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" | ... 521 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