Center
Component to center its children horizontally.
The <Center> is a layout component that centers its children horizontally within a container.
Usage
You can use it to center a single child or a list of children. The maxWidth prop sets the maximum width of the container
and the space prop adds spacing between the children elements.
The <Center> component can also be used with components like <Text>, <Stack> or <Inline> component.
Preview
Code
Props
Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
aria-describedby?string;
Identifies the element (or elements) that describes the object.
aria-details?string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?string;
Defines a string value that labels the current element.
aria-labelledby?string;
Identifies the element (or elements) that labels the current element.
aria-live?"off" | "polite" | "assertive";
Indicates the level of importance for updates in the live region.
- 'off': Updates are not announced unless focused.
- 'polite': Updates are announced when the user is idle.
- 'assertive': Updates are announced immediately, interrupting other announcements.
children?ReactNode;
id?string;
The element's unique identifier. See MDN.
maxWidth?string;
The maximum width of the container.
Defaults to:
100%role?"region" | (string & {});
Identifies the element a significant section of content for easier navigation.
When
region is used as a role, an aria-label or aria-labelledby must be provided.
See MDN.space?GapSpaceProp;
The space between the children. You can see allowed tokens here.
Defaults to:
0Related
Last update: January 22, 2025