Center

Layout primitive designed to center child elements along both horizontal and vertical axes effortlessly.

Component Syntax

blade

<x-aura::center gap="3">
    <x-aura::icon name="check" size="sm" />
    <x-aura::text size="sm">
        Centered Content
    </x-aura::text>
</x-aura::center>

1. Centered Status Notice

blade

All cloud changes synchronized

<x-aura::center gap="2">
    <x-aura::icon name="check-circle-2" size="sm" />
    <x-aura::text size="sm" weight="medium">
        All cloud changes synchronized
    </x-aura::text>
</x-aura::center>

2. Inline Centered Badge Element

blade

System status:

Online

<x-aura::center :inline="true" gap="1.5">
    <x-aura::badge variant="neutral" size="sm">
        Online
    </x-aura::badge>
</x-aura::center>

3. Vertical Centered Action Box

blade

Ready to deploy?

Instant zero downtime deployments with rollback support.

<x-aura::center gap="4">
    <x-aura::flex direction="col" align="center" gap="2" class="text-center">
        <x-aura::heading level="3" size="md">Ready to deploy?</x-aura::heading>
        <x-aura::button variant="primary" size="sm">Deploy</x-aura::button>
    </x-aura::flex>
</x-aura::center>

Component Props

Available properties and configurations for the center layout component.

Prop	Default	Available Values
inline	false	true false
gap	0	Spacing scale (0, 1, 2, 3, 4, 6, 8)

Aura Wire

Component Library

Center

Component Syntax

1. Centered Status Notice

2. Inline Centered Badge Element

3. Vertical Centered Action Box

Ready to deploy?

Component Props

Flex

Header

Aura Wire