Skip to main content
Version: v7 (beta)

ion-back-button

shadow

Contents

The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.

To change what is displayed in the back button, use the text and icon properties.

Usage

<!-- Default back button -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<!-- Back button with a default href -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<!-- Back button with custom text and icon -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button
[text]="buttonText"
[icon]="buttonIcon">
</ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<!-- Back button with no text and custom icon -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="" icon="add"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<!-- Danger back button next to a menu button -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
<ion-back-button color="danger"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

Properties

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

defaultHref

DescriptionThe url to navigate back to by default when there is no history.
Attributedefault-href
Typestring | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the button.
Attributedisabled
Typeboolean
Defaultfalse

icon

DescriptionThe built-in named SVG icon name or the exact src of an SVG file to use for the back button.
Attributeicon
Typenull | string | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

routerAnimation

DescriptionWhen using a router, it specifies the transition animation when navigating to another page.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

text

DescriptionThe text to display in the back button.
Attributetext
Typenull | string | undefined
Defaultundefined

type

DescriptionThe type of the button.
Attributetype
Type"button" | "reset" | "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
iconThe back button icon (uses ion-icon).
nativeThe native HTML button element that wraps all child elements.
textThe back button text.

CSS Custom Properties

NameDescription
--backgroundBackground of the button
--background-focusedBackground of the button when focused with the tab key
--background-focused-opacityOpacity of the button background when focused with the tab key
--background-hoverBackground of the button on hover
--background-hover-opacityOpacity of the background on hover
--border-radiusBorder radius of the button
--colorText color of the button
--color-focusedText color of the button when focused with the tab key
--color-hoverText color of the button on hover
--icon-font-sizeFont size of the button icon
--icon-font-weightFont weight of the button icon
--icon-margin-bottomBottom margin of the button icon
--icon-margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon
--icon-margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon
--icon-margin-topTop margin of the button icon
--icon-padding-bottomBottom padding of the button icon
--icon-padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon
--icon-padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon
--icon-padding-topTop padding of the button icon
--margin-bottomBottom margin of the button
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the button
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the button
--margin-topTop margin of the button
--min-heightMinimum height of the button
--min-widthMinimum width of the button
--opacityOpacity of the button
--padding-bottomBottom padding of the button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-topTop padding of the button
--ripple-colorColor of the button ripple effect
--transitionTransition of the button

Slots

No slots available for this component.

View Source