Buttons layout

Renders a standardized horizontal row of buttons with consistent spacing, alignment and ordering.

The purpose of this component is to ensure a consistent user experience when displaying the list of available actions to the user, regardless of whether the screen is provided by the framework, the transversal module, or your own module.

The order in which you place buttons inside the <buttons-layout> is very important.

Important

Always place the button representing the main action first.

By default, buttons inside the <buttons-layout> are displayed in the same order as they are placed in the UI view template, flowing from left to right.

This order can be inverted through an option in themes, making all buttons placed inside a <buttons-layout> flow from right to left.

For this reason, we advise to always use the <buttons-layout> when displaying a list of actions to the user to ensure buttons are always displayed in a consistent order.

Node name : buttons-layout

Examples

<modal is-open="@Parameters.IsOpen" dismissible="true">
    <modal-header>
        <!-- ... -->
    </modal-header>
    <modal-body>
        <!-- ... -->
    </modal-body>
    <modal-footer>
        <buttons-layout>
            <button type="action" action-name="Ok" />
            <button type="action" action-name="Cancel" />
        </buttons-layout>
    </modal-footer>
</modal>