Komponenter

HStack

HStack er en av våre layout primitives. Den brukes til å horisontalt gruppere elementer sammen med lik avstand. Dette er en wrapper for display:flex og flex-direction:row.

StabilOppdatert 30. april 2025

Github Endringslogg

Egnet til:

Gruppering av Tags
Gruppering av Cards

Uegnet til:

Oppbygging av større side-layout (se Page og HGrid)

Eksempler

Props

HStack

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>
data-color?: Type:
(string & {}) | AkselColor
justify?: Type:
ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">
Description:
CSS justify-content property.
Example:
justify='center'justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
align?: Type:
ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">
Default:
"stretch"
Description:
CSS align-items property.
Example:
align='center'align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
wrap?: Type:
boolean
Description:
Sets the CSS flex-wrap property.
gap?: Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
Description:
CSS gap property. Accepts a spacing token or an object of spacing tokens for different breakpoints.
Example:
gap='space-16'gap='space-32 space-16'gap={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 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<"hidden" | "auto" | "visible" | "clip" | "scroll">
Description:
CSS overflow
overflowX?: Type:
ResponsiveProp<"hidden" | "auto" | "visible" | "clip" | "scroll">
Description:
CSS overflow-x
overflowY?: Type:
ResponsiveProp<"hidden" | "auto" | "visible" | "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
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

HStack

Egnet til:

Uegnet til:

Eksempler

Props

HStack

asChild?

data-color?

justify?

align?

wrap?

gap?

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?

ref?

as?