XDS — Design System

Center@xds/core · XDSCenter v0.0.13

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.

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

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.

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>
  );
}

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.

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

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.

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> ); }

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> ); }

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> ); }