If session.lastRoute is populated in the store it will be used. If it is not the default-route attribute will be used. And if no default-route is provided then the user will return to the root of the current application as specified in application.applications in the store.

c-backLink and c-backButton classes are added to the root element of the components to allow styling outside of the component itself.

Note It'd be best to avoid using this component with forms that use unsavedChangesPrompt since a route change is triggered and that won't cause functions in the forms component to get called.

Back Link

Specified glyph with optional text will be used as an anchor for the back link.

HTML

<div class="t-content" style="display: flex; align-items: center;" ng-controller="BackExampleController as ctrl">
    <back-link
        glyph="back-arrow"
        text="Go Back"
        default-route="index.customercare.customer.dashboard">
    </back-link>
</div>

Back Link with CSS Class

Specified glyph, text and a CSS class for the back link.

HTML

<div class="t-content" style="display: flex; align-items: center;" ng-controller="BackExampleController as ctrl">
    <back-link
        link-css-class="u-milli"
        glyph="back-arrow"
        text="Go Back"
        default-route="index.customercare.customer.dashboard">
    </back-link>
</div>

Back Button

A button to be used to take the user back. If a on-click function is passed it will be executed before transitioning to the previous page.

HTML

<div class="t-content" ng-controller="BackExampleController as ctrl">
    <back-button
        glyph="back-arrow"
        text="Go Back"
        default-route="index.customercare.customer.dashboard">
    </back-button>
</div>

Route Link

A simple, purely presentational link for routing. Often used when always wants to return to a list view from a details view, or other similar experience scenarios.

HTML

<div class="t-content"
    style="display: flex; align-items: center;">
    <route-link
        route="index">
    </route-link>
</div>

Route Link with CSS Class

A route link with a CSS class.

HTML

<div class="t-content"
    style="display: flex; align-items: center;">
    <route-link
        link-css-class="u-milli"
        glyph="back-arrow"
        text="Go Back"
        route="index">
    </route-link>
</div>