Centered

A centred block places its content in the middle of the space it is given. It is what a sign-in card, an empty page, a permission prompt and an error state all use, and it exists so those three flex properties are written once rather than in every consumer.

It is the counterpart of Stack for the case where there is one thing to place rather than a list to arrange. Stack distributes children, Split balances two panes, and Centered has one job: deciding where the single thing goes.

Usage

import { Centered } from "@asheeui/web";

<Centered minHeight="lg" contained containerSize="sm">
  <Card title="Session expired" description="Sign in again to continue." />
</Centered>

Which axis

axis is both, horizontal or vertical. horizontal centres the block sideways only; vertical centres it down only; both does the two, and it also centres the text, because a block centred on both axes is almost always a short statement rather than a paragraph. A consumer that wants the position without the alignment appends its own class, which wins over the component's.

both is the default. An instance whose content is a paragraph it wants left-aligned states axis="horizontal": centring down does nothing for a block that is only as tall as its text, and both would centre the text as well.

The height it centres in

Vertical centring only means something if the block is taller than its content. minHeight is what gives it that room, taken from the shared spacing scale, and without it the block is exactly as tall as its content, so justify-center has nothing to centre in. Vertical centring without a height does nothing at all.

That is also why the component reserves none by default: a block that claimed height on its own would add space to every page that used it.

contained holds the content in a Container at containerSize, which is what a whole-page centred region needs so that a card or a heading keeps a readable measure instead of stretching to the window. Without it the block is as wide as its parent and only its children are centred.

Props

axis, contained and containerSize are registered by the component as both, false and lg, so each resolves from the instance, then components.centered, then that value. minHeight is not registered: its fallback is none, so a block reserves height only when the instance or the application asks for it, and no layout gains empty space as a side effect of using the component.

Accessibility

• The block adds no role and no ARIA attributes: it is a div, or whatever as names, and it changes where its content sits rather than what the content is. The reading order stays the source order.
• axis="both" sets the text alignment as well as the two flex properties, so it changes how text reads and not only where the block starts. State horizontal when the centring is about position alone.
• The room is reserved with a minimum height rather than claimed by an empty element, so a loading or empty region does not collapse and then jump when its content arrives, the reserved space is the point of the option, not a side effect.
• A centred block usually holds the page's single action. Keep that action a real Button or a link so it stays in the tab order and announces its role, rather than making the block itself pressable.

minHeight takes the same spacing tokens as every other layout, see Layout and spacing.

Native

@asheeui/native exports the same Centered with the same axis and minHeight, resolved through the native registry, and the platform's spacing scale mirrors the web's, so a step means the same thing on both. contained and containerSize are web-only: the platform's Centered takes the axis and the height and nothing else, and a screen that wants a maximum measure wraps the block in the platform's Container. See React Native.

Related