ion-back-button
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>
<!-- 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 default-href="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="Volver" icon="close"></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 | |
---|---|
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
defaultHref | |
Description | The url to navigate back to by default when there is no history. |
Attribute | default-href |
Type | string | undefined |
icon | |
Description | The icon name to use for the back button. |
Attribute | icon |
Type | null | string | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
text | |
Description | The text to display in the back button. |
Attribute | text |
Type | null | string | undefined |
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the button |
--border-radius | Border radius of the button |
--color | Text color of the button |
--icon-font-size | Font size of the button icon |
--icon-font-weight | Font weight of the button icon |
--icon-margin-bottom | Margin bottom of the button icon |
--icon-margin-end | Margin end of the button icon |
--icon-margin-start | Margin start of the button icon |
--icon-margin-top | Margin top of the button icon |
--icon-padding-bottom | Padding bottom of the button icon |
--icon-padding-end | Padding end of the button icon |
--icon-padding-start | Padding start of the button icon |
--icon-padding-top | Padding top of the button icon |
--margin-bottom | Margin bottom of the button |
--margin-end | Margin end of the button |
--margin-start | Margin start of the button |
--margin-top | Margin top of the button |
--min-height | Minimum height of the button |
--min-width | Minimum width of the button |
--opacity | Opacity of the button |
--padding-bottom | Padding bottom of the button |
--padding-end | Padding end of the button |
--padding-start | Padding start of the button |
--padding-top | Padding top of the button |
--ripple-color | Color of the button ripple effect |
--transition | Transition of the button |