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

Theme Variables (SCSS)#

$action-row-gap-x: .5rem !default;
$action-row-gap-y: .5rem !default;
ActionRow Props API
  • as elementType

    Specifies the base element

  • className string

    Specifies class name to append to the base element

  • children node

    Specifies the contents of the row

  • isStacked bool

    Specifies whether row should be displayed horizontally

ActionRowSpacer Props API
This component does not receive any props.