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

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	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ 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.