Astryx Design System

Center@astryxdesign/core v0.0.15 · Center

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 {Center} from '@astryxdesign/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 Layout or AppShell for page-level structure.
Don't	Use Center for horizontal lists of items. Use Stack with hAlign="center" instead.

Examples

Common configurations, variations, and states.

Center — Horizontal Center

An editor toolbar with a document title on the left and formatting actions on the right. This shows axis="horizontal", centering in one direction only. Use when content needs to be horizontally centered while other elements are positioned independently around it.

Center — Vertical & Horizontal Center

An empty state with an icon, heading, and description centered both vertically and horizontally inside a card. This is the most common use of Center: placing content in the middle of a fixed-height area like a panel, card, or content region. The height prop defines the centering space.