Row

::: row creates a horizontal flex row. Use it to align buttons, filters, or any inline elements.

Basic Row

::: row
[All]* [Active] [Archived]
:::

Row with Alignment

Add {right} or {center} to align all content.

::: row {right}
[Export] [+ New Item]*
:::

::: row {center}
Page 1 of 12   [← Prev] [Next →]
:::

Vertical Alignment

Add {top} or {bottom} to align mixed-height row items on the cross axis.

::: row {top}
[Notes...]{rows:3}

[Cancel] [Save]*
:::

::: row {bottom}
[Notes...]{rows:3}

[Cancel] [Save]*
:::

Split Layouts

Use columns when one side needs to stay left while another side aligns right.

::: columns-2
::: column
[All]* [Active] [Archived]

:::
::: column {right}
[+ New Item]*
:::
:::

Mixed Content

Text, badges, icons, and buttons can be combined freely in a row.

::: row
Inbox ((24)){primary}
:::

::: row
:check:

All systems operational ((Live)){success}
:::

::: row
:user:

John Doe ((Admin)){warning}

[Edit] [Remove]{danger}
:::

Search and Filters

::: row
[Search___________]{type:search} [All Teams_______] [This Week_______]
:::

Toolbar Pattern

Use a row for a simple toolbar. For a title on the left and actions on the right, use ::: columns-2 with an aligned column item.

::: columns-2
::: column
**Projects** ((12)){primary}

:::
::: column {right}
[Filter] [Sort] [+ New Project]*
:::
:::

Syntax

::: row
[A] [B] [C]           implicit items, left-aligned
:::
::: row {right}       right-align all content
::: row {center}      center all content
::: row {top}         top-align mixed-height items
::: row {bottom}      bottom-align mixed-height items

::: columns-2           split left/right content into columns
::: column
[A] [B] [C]
:::
::: column {right}
[Save]*
:::
:::