Skip to content
EspañolEnglish
All components (204)

Center

Layout · Center

What it is and when to use it

Centres what it holds, horizontally and vertically. For the space of something loading, a panel that is still empty or a message in the middle of an area.

When to use it

  • A Spinner while a section loads, or a short text in a space that has no content yet.
  • minHeight gives the box a height (a CSS length: 10rem, 50vh): without a height there is nothing to centre vertically.
  • vertical={false} centres only horizontally. Then minHeight is not applied, because the height is only needed to centre vertically.
  • as renders the right element instead of the div.

When not to

  • An empty state with icon, title, explanation and action: EmptyState, which already brings its own layout.
  • The reading width of a page: Container.
  • Laying out several pieces with a gap: Stack, with align="center" and justify="center" if needed.

Keyboard: it does not take part: it only lays out.

Accessibility: it adds no role and does not change the order of what is inside. What is announced is said by the piece inside, not by the centring: Spinner is a progress bar with its name ("Loading the orders"), and a "No results" that appears has to go in a role="status" to be heard.

Fine-tuning: --amset-center-min, the minimum height with vertical centring; minHeight writes it inline.

What it looks like

<Center minHeight="10rem">
  <Spinner label="Loading the orders" />
</Center>

Props

Import it with import { Center } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
as"article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span"—
classNamestringMerged with the library classes; it does not replace them.
minHeightstringMinimum height, to centre inside a space that has no content yet.
styleCSSProperties—
verticalbooleanAlso centres vertically. It needs the box to have a height.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: