Version: v5

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

Angular
Javascript
React
Stencil
Vue

<!-- 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>

import React from 'react';
import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';

export const BackButtonExample: React.FC = () => (
  <IonContent>
    {/*-- Default back button --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Back button with a default href --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="home" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Back button with custom text and icon --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton text="buttonText" icon="buttonIcon" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Back button with no text and custom icon --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton text="" icon="add" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Danger back button next to a menu button --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton />
          <IonBackButton color="danger" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'back-button-example',
  styleUrl: 'back-button-example.css',
})
export class BackButtonExample {
  render() {
    const buttonText = 'Custom';
    const buttonIcon = 'add';

    return [
      // 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>,
    ];
  }
}

<template>
  <!-- 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="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>
</template>

<script>
  import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonButtons, IonHeader, IonMenuButton, IonToolbar },
  });
</script>

Properties

color

Description	The 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.
Attribute	`color`
Type	`string ｜ undefined`
Default	`undefined`

defaultHref

Description	履歴がない場合に、デフォルトで戻るためのURL。
Attribute	`default-href`
Type	`string ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザはボタンと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

icon

Description	The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
Attribute	`icon`
Type	`null ｜ string ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

routerAnimation

Description	When using a router, it specifies the transition animation when navigating to another page.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

text

Description	バックボタンに表示するテキストです。
Attribute	`text`
Type	`null ｜ string ｜ undefined`
Default	`undefined`

type

Description	ボタンの種類です。
Attribute	`type`
Type	`"button" ｜ "reset" ｜ "submit"`
Default	`'button'`

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
`icon`	戻るボタンのアイコン（ion-iconを使用）。
`native`	すべての子要素を包むネイティブ HTML ボタン要素。
`text`	戻るボタンのテキストです。

CSS Custom Properties

Name	Description
`--background`	ボタンの背景
`--background-focused`	タブキーでフォーカスしたときのボタンの背景
`--background-focused-opacity`	タブキーでフォーカスしたときのボタンの背景の不透明度
`--background-hover`	ホバー時のボタンの背景
`--background-hover-opacity`	ホバー時の背景の不透明度
`--border-radius`	ボタンの境界半径
`--color`	ボタンの文字色
`--color-focused`	タブキーでフォーカスしたときのボタンの文字色
`--color-hover`	ホバー時のボタンの文字色
`--icon-font-size`	ボタンアイコンのFont Size
`--icon-font-weight`	ボタンアイコンのFont Weight
`--icon-margin-bottom`	ボタンアイコンのBottom Margin
`--icon-margin-end`	ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin
`--icon-margin-start`	ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin
`--icon-margin-top`	ボタンアイコンのTop Margin
`--icon-padding-bottom`	ボタンアイコンのBottom Padding
`--icon-padding-end`	ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。
`--icon-padding-start`	ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。
`--icon-padding-top`	ボタンアイコンのTop Padding
`--margin-bottom`	ボタンのBottom Margin
`--margin-end`	ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin
`--margin-start`	ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin
`--margin-top`	ボタンのTop Margin
`--min-height`	ボタンの最小高さ
`--min-width`	ボタンの最小幅
`--opacity`	ボタンの不透明度
`--padding-bottom`	ボタンのBottom Padding
`--padding-end`	ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
`--padding-start`	ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
`--padding-top`	ボタンのTop Padding
`--ripple-color`	ボタンリプルエフェクトの色
`--transition`	ボタンの遷移

Slots

No slots available for this component.

Usage​

Properties​

color​

defaultHref​

disabled​

icon​

mode​

routerAnimation​

text​

type​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​