Actions toolbar

Actions toolbar is a set of actions on a page, form and so on that includes primary and/or secondary actions. To customize action toolbar .lib-actions-toolbar() mixin is used. To implement the Actions toolbar use the following markup

Sample of using a button + link

Sample of using a button + button

.actions-toolbar {
    .lib-actions-toolbar();
}

.example-actions-toolbar-1 {
    .lib-actions-toolbar();
}

Actions toolbar mixin variables

    

      

        Mixin variable
        Global variable
        Default value
        Allowed values
        Comment
      

      

        @_actions-toolbar-actions-position
        @actions-toolbar-actions__position
        justify
        justify | left | right | center
        Position for actions in Actions toolbar
      

      

        @_actions-toolbar-actions-reverse
        @actions-toolbar-actions__reverse
        false
        true | false
        Reverse primary and secondary blocks position in Actions toolbar
      

      

        @_actions-toolbar-margin
        @actions-toolbar__margin
        false
        '' | false | value
        Margins of the Actions toolbar
      

      

        @_actions-toolbar-padding
        @actions-toolbar__padding
        false
        '' | false | value
        Paddings of the Actions toolbar
      

      

        @_actions-toolbar-actions-margin
        @actions-toolbar-actions__margin
        false
        '' | false | value
        Margins of all .actions in the Actions toolbar
      

      

        @_actions-toolbar-primary-actions-margin
        @actions-toolbar-actions-primary__margin
        0 @indent__xs 0 0
        '' | false | value
        Margins of primary .actions in the Actions toolbar
      

      

        @_actions-toolbar-secondary-actions-margin
        @actions-toolbar-actions-secondary__margin
        false
        '' | false | value
        Margins of secondary .actions in the Actions toolbar
      

      

        @_actions-toolbar-actions-links-margin-top
        @actions-toolbar-actions-links__margin-top
        false
        '' | false | value
        Margin-top for links with class .action in the Actions toolbar
      

      

        @_actions-toolbar-primary-actions-links-margin-top
        @actions-toolbar-actions-links-primary__margin-top
        false
        '' | false | value
        Margin-top for primary links with class .action in the Actions toolbar
      

      

        @_actions-toolbar-secondary-actions-links-margin-top
        @actions-toolbar-actions-secondary__margin
        6px
        '' | false | value
        Margin-top for secondary links with class .action in the Actions toolbar

Actions toolbar alignment

@_actions-toolbar-actions-position variable controls aligning actions toolbar elements. It can be set to:

  justify | left | right | center

Justify:

  @_actions-toolbar-actions-position: justify

Align toolbar elements left:

  @_actions-toolbar-actions-position: left

Align toolbar elements right:

  @_actions-toolbar-actions-position: right

Center:

  @_actions-toolbar-actions-position: center
.example-actions-toolbar-2 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: justify
    );
}

.example-actions-toolbar-3 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left
    );
}

.example-actions-toolbar-4 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: right
    );
}

.example-actions-toolbar-5 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: center
    );
}

Reverse primary and secondary blocks

@_actions-toolbar-actions-reverse variable controls reversing of primary and secondary blocks.

If it is set to false, the order of blocks in action toolbar is default.

If it is set to true, the order of blocks in action toolbar is reversed.

Justify toolbar elements and reverse them:

  @_actions-toolbar-actions-position: justify,
  @_actions-toolbar-actions-reverse: true

Align toolbar elements to the left and reverse them:

  @_actions-toolbar-actions-position: left,
  @_actions-toolbar-actions-reverse: true

Align toolbar elements to the right and reverse them:

  @_actions-toolbar-actions-position: right,
  @_actions-toolbar-actions-reverse: true
.example-actions-toolbar-6 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: justify,
        @_actions-toolbar-actions-reverse: true
    );
}

.example-actions-toolbar-7 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left,
        @_actions-toolbar-actions-reverse: true
    );
}

.example-actions-toolbar-8 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: right,
        @_actions-toolbar-actions-reverse: true
    );
}

Actions toolbar indents customizations

@_actions-toolbar-margin variable controls margins of the actions toolbar wrapper.

@_actions-toolbar-padding variable controls paddings of the actions toolbar wrapper.

@_actions-toolbar-primary-actions-margin variable controls margins of the primary action elements.

@_actions-toolbar-secondary-actions-margin variable controls margins of the secondary action elements.

.example-actions-toolbar-9 {
    .lib-actions-toolbar(
        @_actions-toolbar-margin: 10px,
        @_actions-toolbar-padding: 10px
    );
}

.example-actions-toolbar-10 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left,
        @_actions-toolbar-primary-actions-margin: 0 50px 0 0
    );
}

.example-actions-toolbar-11 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left,
        @_actions-toolbar-secondary-actions-margin: 0 50px 0 0
    );
}

Responsive actions toolbar

To set up responsive action toolbar, all floats of its elements should be cleared. To do this .lib-actions-toolbar-clear-floats() mixin is used.

.example-actions-toolbar-12 {
    .lib-actions-toolbar();
}

@media only screen and (max-width: @screen__m) {
    .example-actions-toolbar-12 {
       .lib-actions-toolbar-clear-floats();
    }
}
<div class="actions-toolbar"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-1"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Redeem Gift Card</span></button> </div> <div class="secondary"> <button class="action check" type="button" value="Check status and balance"> <span>Check status and balance</span> </button> </div> </div>
<div class="example-actions-toolbar-2"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-3"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-4"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-5"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-6"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-7"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-8"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class="example-actions-toolbar-9"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a class="action back" href="#"><span>Back</span></a> </div> </div>
<div class=" example-actions-toolbar-10"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> <button type="submit" class="action submit2" title="Submit2"><span>Submit2</span></button> </div> <div class="secondary"> <a href="#" class="action towishlist"><span>Add to Wish List</span></a> <a href="#" class="action tocompare"><span>Add to Compare</span></a> </div> </div>
<div class="example-actions-toolbar-11"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> <button type="submit" class="action submit2" title="Submit2"><span>Submit2</span></button> </div> <div class="secondary"> <a href="#" class="action towishlist"><span>Add to Wish List</span></a> <a href="#" class="action tocompare"><span>Add to Compare</span></a> </div> </div>
<div class="example-actions-toolbar-12"> <div class="primary"> <button type="submit" class="action submit" title="Submit"><span>Submit</span></button> </div> <div class="secondary"> <a href="#" class="action towishlist"><span>Add to Wish List</span></a> </div> </div>