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 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 | undefined
Defaultundefined

defaultHref

Description履歴がない場合に、デフォルトで戻るためのURL。
Attributedefault-href
Typestring | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはボタンと対話することができません。
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

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
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

Descriptionバックボタンに表示するテキストです。
Attributetext
Typenull | string | undefined
Defaultundefined

type

Descriptionボタンの種類です。
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
icon戻るボタンのアイコン(ion-iconを使用)。
nativeすべての子要素を包むネイティブ HTML ボタン要素。
text戻るボタンのテキストです。

CSS Custom Properties

NameDescription
--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.