Skip to main content

ion-segment-button

Segment buttons are groups of related buttons inside of a Segment. They are displayed in a horizontal row. A segment button can be checked by default by setting the value of the segment to the value of the segment button. Only one segment button can be selected at a time.

Usage#

<!-- Segment buttons with text and click listener -->
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button>
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with the first checked and the last disabled -->
<ion-segment value="paid">
<ion-segment-button value="paid">
<ion-label>Paid</ion-label>
</ion-segment-button>
<ion-segment-button value="free">
<ion-label>Free</ion-label>
</ion-segment-button>
<ion-segment-button disabled value="top">
<ion-label>Top</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with values and icons -->
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Segment with a value that checks the last button -->
<ion-segment value="shared">
<ion-segment-button value="bookmarks">
<ion-label>Bookmarks</ion-label>
</ion-segment-button>
<ion-segment-button value="reading">
<ion-label>Reading List</ion-label>
</ion-segment-button>
<ion-segment-button value="shared">
<ion-label>Shared Links</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Label only -->
<ion-segment value="1">
<ion-segment-button value="1">
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2">
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3">
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Icon only -->
<ion-segment value="heart">
<ion-segment-button value="call">
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="heart">
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="pin">
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon top -->
<ion-segment value="2">
<ion-segment-button value="1">
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="2">
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3">
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon bottom -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-bottom">
<ion-icon name="call"></ion-icon>
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2" layout="icon-bottom">
<ion-icon name="heart"></ion-icon>
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-bottom">
<ion-icon name="pin"></ion-icon>
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Icon start -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-start">
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="2" layout="icon-start">
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-start">
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon end -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-end">
<ion-icon name="call"></ion-icon>
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2" disabled layout="icon-end">
<ion-icon name="heart"></ion-icon>
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-end">
<ion-icon name="pin"></ion-icon>
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
import { Component } from '@angular/core';
@Component({
selector: 'segment-button-example',
templateUrl: 'segment-button-example.html',
styleUrls: ['./segment-button-example.css'],
})
export class SegmentButtonExample {
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}

Properties#

disabled#

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

layout#

DescriptionSet the layout of the text and icon in the segment.
Attributelayout
Type"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined
Default'icon-top'

mode#

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

type#

DescriptionThe type of the button.
Attributetype
Type"button" \| "reset" \| "submit"
Default'button'

value#

DescriptionThe value of the segment button.
Attributevalue
Typestring
Default'ion-sb-' + (ids++)

CSS Shadow Parts#

NameDescription
indicatorThe indicator displayed on the checked segment button.
indicator-backgroundThe background element for the indicator displayed on the checked segment button.
nativeThe native HTML button element that wraps all child elements.

CSS Custom Properties#

NameDescription
--backgroundBackground of the segment button
--background-checkedBackground of the checked segment button
--background-focusedBackground of the segment button when focused with the tab key
--background-focused-opacityOpacity of the segment button background when focused with the tab key
--background-hoverBackground of the segment button on hover
--background-hover-opacityOpacity of the segment button background on hover
--border-colorColor of the segment button border
--border-radiusRadius of the segment button border
--border-styleStyle of the segment button border
--border-widthWidth of the segment button border
--colorColor of the segment button
--color-checkedColor of the checked segment button
--color-focusedColor of the segment button when focused with the tab key
--color-hoverColor of the segment button on hover
--indicator-box-shadowBox shadow on the indicator for the checked segment button
--indicator-colorColor of the indicator for the checked segment button
--indicator-heightHeight of the indicator for the checked segment button
--indicator-transformTransform of the indicator for the checked segment button
--indicator-transitionTransition of the indicator for the checked segment button
--margin-bottomBottom margin of the segment button
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
--margin-topTop margin of the segment button
--padding-bottomBottom padding of the segment button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
--padding-topTop padding of the segment button
--transitionTransition of the segment button