Skip to main content
Version: v6

ion-back-button

shadow

The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless defaultHref is set. The back button displays different text and icon based on the mode, but this can be customized.

Basic Usage

Custom Back Button

By default, the back button will display the text "Back" with a "chevron-back" icon on ios, and an "arrow-back-sharp" icon on md. This can be customized per back button component by setting the icon or text properties. Alternatively, it can be set globally using the backButtonIcon or backButtonText properties in the global config. See the Config docs for Angular, React, or Vue for more information.

Default Back History

Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the defaultHref on the back button to a path. In order to use defaultHref, the app must contain a router with paths set.

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.