Skip to main content
Version: v8

ion-tab-button

shadow

A tab button is a UI component that is placed inside of a tab bar. The tab button can specify the layout of the icon and label and connect to a tab view.

See the tabs documentation for more details on configuring tabs.

Usage

<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar" aria-hidden="true"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>

<ion-tab-button tab="speakers">
<ion-icon name="person-circle" aria-hidden="true"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-button tab="map">
<ion-icon name="map" aria-hidden="true"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-button tab="about">
<ion-icon name="information-circle" aria-hidden="true"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

Properties

disabled

DescriptionIf true, the user cannot interact with the tab button.
Attributedisabled
Typeboolean
Defaultfalse

download

DescriptionThis attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attributedownload
Typestring | undefined
Defaultundefined

href

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring | undefined
Defaultundefined

layout

DescriptionSet the layout of the text and icon in the tab bar. It defaults to "icon-top".
Attributelayout
Type"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

rel

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring | undefined
Defaultundefined

selected

DescriptionThe selected tab component
Attributeselected
Typeboolean
Defaultfalse

tab

DescriptionA tab id must be provided for each ion-tab. It's used internally to reference the selected tab or by the router to switch between them.
Attributetab
Typestring | undefined
Defaultundefined

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeThe native HTML anchor element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the tab button
--backgroundBackground of the tab button
--background-focusedBackground of the tab button when focused with the tab key
--background-focusedBackground of the tab button when focused with the tab key
--background-focused-opacityOpacity of the tab button background when focused with the tab key
--background-focused-opacityOpacity of the tab button background when focused with the tab key
--colorColor of the tab button
--colorColor of the tab button
--color-focusedColor of the tab button when focused with the tab key
--color-focusedColor of the tab button when focused with the tab key
--color-selectedColor of the selected tab button
--color-selectedColor of the selected tab button
--padding-bottomBottom padding of the tab button
--padding-bottomBottom padding of the tab button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
--padding-topTop padding of the tab button
--padding-topTop padding of the tab button
--ripple-colorColor of the button ripple effect
--ripple-colorColor of the button ripple effect

Slots

No slots available for this component.