Back to Magento2

Actions toolbar

lib/web/css/docs/actions-toolbar.html

2.4.81.1 KB
Original Source

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

<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>

Sample of using a button + button

<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>

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

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