Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add row

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::row> is the horizontal counterpart to Stack: toolbars, button groups, a label beside its value.

It wraps by default, so a row of buttons folds onto a second line on a narrow screen instead of overflowing.

Basic Usage

<x-aura::row>
    <x-aura::button variant="primary">Save</x-aura::button>
    <x-aura::button variant="secondary">Cancel</x-aura::button>
</x-aura::row>
<x-aura::row justify="between">
    <x-aura::heading :level="2">Orders</x-aura::heading>
    <x-aura::button variant="primary">New order</x-aura::button>
</x-aura::row>

Props

Prop Type Default Description
gap string 'md' none, xs, sm, md, lg, xl.
align string 'center' start, center, end, baseline, stretch.
justify string|null null start, center, end, between, around.
wrap bool true Allow items to wrap onto a new line.
as string 'div' Element to render.

With a spacer

Spacer with no size absorbs the remaining room, which pushes what follows to the far end:

Total €129.00 
<x-aura::row>
    <span class="text-sm">Total</span>
    <x-aura::spacer />
    <strong class="text-sm">€129.00</strong>
</x-aura::row>

Notes

Set wrap="false" only when you have decided what happens to the overflow. A non-wrapping row on a phone will simply run off the screen.