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

Theme Variables (SCSS)

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

    Specifies the base element

    Default'div'
  • className
    string

    Specifies class name to append to the base element

  • children
    node

    Specifies the contents of the row

    Defaultnull
  • isStacked
    bool

    Specifies whether row should be displayed horizontally

    Defaultfalse
ActionRowSpacer Props API
This component does not receive any props.