XDS — Design System

XDSLayoutHeader@xds/core · Layout

Preview coming soon

Usage

Layout provides composable components for building structured page shells with header, sidebar, content, and footer slots. Use XDSLayout for full app layouts and XDSHStack/XDSVStack for simple directional stacking.

Best practices

Guidance	Practices
Do	Use XDSLayout for page shells that need distinct zones like header, sidebar(s), content, and footer.
Do	Use XDSHStack and XDSVStack for simple directional stacking within a content area.
Don't	Use XDSLayout for simple stacking layouts — use XDSHStack or XDSVStack instead.
Don't	Nest multiple XDSLayout components — use one per page shell and compose content within its slots.

Import

ts
import {XDSLayoutHeader} from '@xds/core/Layout'

Props

Prop	Type	Description
children	ReactNode	Header content.
hasDivider	boolean (default: false)	Border at bottom edge.
height	number \| string	Header height.
label	string	Accessible label for the landmark element.
role	AriaRole	ARIA landmark role.

Showcase source

tsx
'use client';
import {
  XDSLayout,
  XDSLayoutHeader,
  XDSLayoutContent,
  XDSLayoutFooter,
  XDSLayoutPanel,
  XDSCard,
  XDSHStack,
} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
import {XDSHeading} from '@xds/core/Text';
import {XDSButton} from '@xds/core/Button';
export default function LayoutHeaderShowcase() {
  return (
    <XDSCenter width={600}>
      <XDSLayout
        height="fill"
        header={
          <XDSLayoutHeader hasDivider>
            <XDSHStack gap={2} vAlign="center" hAlign="between">
              <XDSHeading level={4}>Dashboard</XDSHeading>
              <XDSHStack gap={2}>
                <XDSButton label="Export" variant="secondary">
                  Export
                </XDSButton>
                <XDSButton label="New Item" variant="primary">
                  New Item
                </XDSButton>
              </XDSHStack>
            </XDSHStack>
          </XDSLayoutHeader>
        }
        start={
          <XDSLayoutPanel hasDivider width={140}>
            <XDSCard variant="muted" />
          </XDSLayoutPanel>
        }
        content={
          <XDSLayoutContent>
            <XDSCard variant="muted" />
          </XDSLayoutContent>
        }
        footer={
          <XDSLayoutFooter hasDivider>
            <XDSCard variant="muted" />
          </XDSLayoutFooter>
        }
      />
    </XDSCenter>
  );
}