ActionRow

A layout utility for the common use case of aligning buttons, links or text in a row in a control bar or nav.

ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via flex-direction: column-reverse;).

Basic Usage

Usage with a Spacer

ActionRow can also be used with a helper component ActionRow.Spacer to insert empty space between children

Stacked Usage

$action-row-gap-x:                   .5rem !default;
$action-row-gap-y:                   .5rem !default;