XDS — Design System

XDSCenter@xds/core · Center

Preview coming soon

Usage

Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of the available space.

Best practices

Guidance	Practices
Do	Use axis="horizontal" or axis="vertical" when you only need one direction — both axes is the default but not always needed.
Do	Set a height when centering vertically — Center needs a defined height to know what space to center within.
Do	Use isInline to center small elements like icons or badges within a line of text without breaking the text flow.
Don't	Wrap large page sections in Center — use XDSLayout or XDSAppShell for page-level structure.
Don't	Use Center for horizontal lists of items — use XDSStack with hAlign="center" instead.

Anatomy

Element		Description
Container	required	A flexbox wrapper that aligns its children to the center along the chosen axis.
Content	required	Any children passed to Center. Typically a card, form, spinner, or empty state message.

Import

ts
import {XDSCenter} from '@xds/core/Center'

Props

Prop	Type	Description
axis	'both' \| 'horizontal' \| 'vertical' (default: 'both')	Which direction(s) to center.
width	number \| string	Container width (px or CSS value).
height	number \| string	Container height (px or CSS value).
isInline	boolean (default: false)	Use inline-flex (useful for text/icons).
children	ReactNode	Content to center.
xstyle	StyleXStyles	StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.

Examples

Common configurations, variations, and states.

Center — Horizontal CenterAn editor toolbar with a document title on the left and formatting actions on the right. This shows axis=

tsx
'use client';
import {XDSCenter} from '@xds/core/Center';
import {XDSCard} from '@xds/core/Card';
import {XDSStack} from '@xds/core/Layout';
import {XDSHeading} from '@xds/core/Text';
import {XDSIcon} from '@xds/core/Icon';
import {XDSIconButton} from '@xds/core/IconButton';
import {
  BoldIcon,
  ItalicIcon,
  UnderlineIcon,
  ListBulletIcon,
  LinkIcon,
  PhotoIcon,
} from '@heroicons/react/24/outline';
export default function CenterHorizontal() {
  return (
    <XDSCard width={520} padding={2}>
      <XDSStack direction="horizontal" vAlign="center">
        <XDSHeading level={2}>Untitled Document</XDSHeading>
        <XDSStack direction="horizontal" gap={0} hAlign="end" style={{flex: 1}}>
          <XDSIconButton
            label="Bold"
            icon={<XDSIcon icon={BoldIcon} />}
            variant="ghost"
            size="sm"
          />
          <XDSIconButton
            label="Italic"
            icon={<XDSIcon icon={ItalicIcon} />}
            variant="ghost"
            size="sm"
          />
          <XDSIconButton
            label="Underline"
            icon={<XDSIcon icon={UnderlineIcon} />}
            variant="ghost"
            size="sm"
          />
          <XDSIconButton
            label="List"
            icon={<XDSIcon icon={ListBulletIcon} />}
            variant="ghost"
            size="sm"
          />
          <XDSIconButton
            label="Link"
            icon={<XDSIcon icon={LinkIcon} />}
            variant="ghost"
            size="sm"
          />
          <XDSIconButton
            label="Image"
            icon={<XDSIcon icon={PhotoIcon} />}
            variant="ghost"
            size="sm"
          />
        </XDSStack>
      </XDSStack>
    </XDSCard>
  );
}

Center — Vertical & Horizontal Center

tsx
'use client';
import {XDSCenter} from '@xds/core/Center';
import {XDSCard} from '@xds/core/Card';
import {XDSStack} from '@xds/core/Layout';
import {XDSIcon} from '@xds/core/Icon';
import {XDSText} from '@xds/core/Text';
import {InboxIcon} from '@heroicons/react/24/outline';
export default function CenterInsideACard() {
  return (
    <XDSCard width={400}>
      <XDSCenter height={200}>
        <XDSStack direction="vertical" gap={2} hAlign="center">
          <XDSIcon icon={InboxIcon} size="lg" color="secondary" />
          <XDSText type="body" weight="bold">
            No messages yet
          </XDSText>
          <XDSText type="supporting" color="secondary">
            Messages from your team will appear here.
          </XDSText>
        </XDSStack>
      </XDSCenter>
    </XDSCard>
  );
}

Showcase source

tsx
'use client';
import {XDSCenter} from '@xds/core/Center';
import {XDSStack} from '@xds/core/Layout';
import {XDSText, XDSHeading} from '@xds/core/Text';
export default function CenterShowcase() {
  return (
    <XDSCenter axis="both" width="100%" height={240}>
      <XDSStack direction="vertical" gap={2} hAlign="center">
        <XDSHeading level={4}>Centered content</XDSHeading>
        <XDSText type="body" color="secondary">
          Horizontally and vertically aligned.
        </XDSText>
      </XDSStack>
    </XDSCenter>
  );
}