Skip to main content

ion-tab-button

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"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></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

CSS Shadow Parts#

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

CSS Custom Properties#

NameDescription
--backgroundBackground of the tab button
--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
--colorColor of the tab button
--color-focusedColor of the tab button when focused with the tab key
--color-selectedColor of the selected 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-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
--ripple-colorColor of the button ripple effect