Skip to main content
Version: v6

ion-segment

shadow

Contents

Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.

Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.

Scrollable Segments

Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the scrollable property to true. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.

Accessibility

Keyboard Navigation

The component has full keyboard support for navigating between and selecting ion-segment-button elements. By default, keyboard navigation will only focus ion-segment-button elements, but you can use the selectOnFocus property to ensure that they get selected on focus as well. The following table details what each key does:

KeyFunction
ArrowRightFocuses the next focusable element.
ArrowLeftFocuses the previous focusable element.
HomeFocuses the first focusable element.
EndFocuses the last focusable element.
Space or EnterSelects the element that is currently focused.

Interfaces

SegmentChangeEventDetail

interface SegmentChangeEventDetail {
value?: string;
}

SegmentCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}

Usage

<!-- Default Segment -->
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button value="enemies">
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>

<!-- Disabled Segment -->
<ion-segment (ionChange)="segmentChanged($event)" disabled value="sunny">
<ion-segment-button value="sunny">
<ion-label>Sunny</ion-label>
</ion-segment-button>
<ion-segment-button value="rainy">
<ion-label>Rainy</ion-label>
</ion-segment-button>
</ion-segment>

<!-- Segment with anchors -->
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button value="dogs">
<ion-label>Dogs</ion-label>
</ion-segment-button>
<ion-segment-button value="cats">
<ion-label>Cats</ion-label>
</ion-segment-button>
</ion-segment>

<!-- Scrollable Segment -->
<ion-segment scrollable value="heart">
<ion-segment-button value="home">
<ion-icon name="home"></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-button value="star">
<ion-icon name="star"></ion-icon>
</ion-segment-button>
<ion-segment-button value="call">
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="globe">
<ion-icon name="globe"></ion-icon>
</ion-segment-button>
<ion-segment-button value="basket">
<ion-icon name="basket"></ion-icon>
</ion-segment-button>
</ion-segment>

<!-- Segment with secondary color -->
<ion-segment (ionChange)="segmentChanged($event)" color="secondary">
<ion-segment-button value="standard">
<ion-label>Standard</ion-label>
</ion-segment-button>
<ion-segment-button value="hybrid">
<ion-label>Hybrid</ion-label>
</ion-segment-button>
<ion-segment-button value="sat">
<ion-label>Satellite</ion-label>
</ion-segment-button>
</ion-segment>

<!-- Segment in a toolbar -->
<ion-toolbar>
<ion-segment (ionChange)="segmentChanged($event)">
<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>
</ion-toolbar>

<!-- Segment with default selection -->
<ion-segment (ionChange)="segmentChanged($event)" value="javascript">
<ion-segment-button value="python">
<ion-label>Python</ion-label>
</ion-segment-button>
<ion-segment-button value="javascript">
<ion-label>Javascript</ion-label>
</ion-segment-button>
</ion-segment>
import { Component } from '@angular/core';

@Component({
selector: 'segment-example',
templateUrl: 'segment-example.html',
styleUrls: ['./segment-example.css'],
})
export class SegmentExample {
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}

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 & Record<never, never> | undefined
Defaultundefined

disabled

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

mode

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

scrollable

DescriptionIf true, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
Attributescrollable
Typeboolean
Defaultfalse

selectOnFocus

DescriptionIf true, navigating to an ion-segment-button with the keyboard will focus and select the element. If false, keyboard navigation will only focus the ion-segment-button element.
Attributeselect-on-focus
Typeboolean
Defaultfalse

swipeGesture

DescriptionIf true, users will be able to swipe between segment buttons to activate them.
Attributeswipe-gesture
Typeboolean
Defaulttrue

value

Descriptionthe value of the segment.
Attributevalue
Typenull | string | undefined
Defaultundefined

Events

NameDescription
ionChangeEmitted when the value property has changed and any dragging pointer has been released from ion-segment.

CSS Custom Properties

NameDescription
--backgroundBackground of the segment button
View Source