Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

SegmentButton

ion-segment-button

Improve this doc

The child buttons of the ion-segment component. Each ion-segment-button must have a value.

Usage

<ion-content>
  <!-- Segment buttons with icons -->
  <ion-segment [(ngModel)]="icons" color="secondary">
    <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 buttons with text -->
  <ion-segment [(ngModel)]="relationship" color="primary">
    <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
      Enemies
    </ion-segment-button>
  </ion-segment>
</ion-content>

Instance Members

isActive

Input Properties

Attr Type Details
disabled boolean

If true, the user cannot interact with this element.
value string

the value of the segment button. Required.

Output Events

Attr Details
ionSelect

Emitted when a segment button has been clicked.

Sass Variables

iOS Material Design Windows Platform
Property Default Description
$segment-button-ios-background-color transparent

Background of the segment button
$segment-button-ios-background-color-activated $toolbar-ios-active-color

Background of the activated segment button
$segment-button-ios-text-color color-contrast($colors-ios, $segment-button-ios-background-color-activated)

Text color of the segment button
$segment-button-ios-transition-activated 100ms all linear

Transition of the activated segment button
$segment-button-ios-transition-hover 100ms all linear

Transition of the segment button on hover
$segment-button-ios-transition-active 100ms all linear

Transition of the segment button when pressed
$segment-button-ios-opacity-hover .1

Opacity of the segment button on hover
$segment-button-ios-opacity-active .16

Opacity of the segment button when pressed
$segment-button-ios-opacity-activated 1

Opacity of the activated segment button
$segment-button-ios-opacity-disabled .3

Opacity of the disabled segment button
$segment-button-ios-border-width 1px

Border width of the segment button
$segment-button-ios-height 3.2rem

Height of the segment button
$segment-button-ios-line-height 3rem

Line height of the segment button
$segment-button-ios-font-size 1.3rem

Font size of the segment button
$segment-button-ios-border-radius 4px

Border radius of the segment button
$segment-button-ios-icon-size 2.6rem

Size of an icon in the segment button
$segment-button-ios-icon-line-height 2.8rem

Line height of an icon in the segment button
$segment-button-ios-toolbar-button-max-width 100px

Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-height 2.6rem

Height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height 2.5rem

Line height of the segment button in a toolbar
$segment-button-ios-toolbar-font-size 1.2rem

Font size of the segment button in a toolbar
$segment-button-ios-toolbar-icon-size 2.2rem

Size of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-line-height 2.4rem

Line height of an icon in the segment button in a toolbar
Property Default Description
$segment-button-md-text-color-activated $toolbar-md-active-color

Text color of the activated segment button
$segment-button-md-border-color-activated $toolbar-md-active-color

Border color of the activated segment button
$segment-button-md-border-bottom-width 2px

Width of the bottom border on the segment button
$segment-button-md-border-bottom-color rgba(#000, .10)

Color of the bottom border on the segment button
$segment-button-md-opacity .7

Opacity of the segment button
$segment-button-md-opacity-activated 1

Opacity of the activated segment button
$segment-button-md-opacity-disabled .3

Opacity of the disabled segment button
$segment-button-md-padding-top 0

Padding top of the segment button
$segment-button-md-padding-end 6px

Padding end of the segment button
$segment-button-md-padding-bottom $segment-button-md-padding-top

Padding bottom of the segment button
$segment-button-md-padding-start $segment-button-md-padding-end

Padding start of the segment button
$segment-button-md-height 4.2rem

Height of the segment button
$segment-button-md-line-height 4rem

Line height of the segment button
$segment-button-md-font-size 1.2rem

Font size of the segment button
$segment-button-md-icon-size 2.6rem

Size of an icon in the segment button
$segment-button-md-icon-line-height $segment-button-md-line-height

Line height of an icon in the segment button
Property Default Description
$segment-button-wp-background-color transparent

Background of the segment button
$segment-button-wp-text-color-activated $toolbar-wp-text-color

Text color of the activated segment button
$segment-button-wp-padding-top 0

Padding top of the segment button
$segment-button-wp-padding-end 6px

Padding end of the segment button
$segment-button-wp-padding-bottom $segment-button-wp-padding-top

Padding bottom of the segment button
$segment-button-wp-padding-start $segment-button-wp-padding-end

Padding start of the segment button
$segment-button-wp-height 4rem

Height of the segment button
$segment-button-wp-line-height 4rem

Line height of the segment button
$segment-button-wp-font-size 1.3rem

Font size of the segment button
$segment-button-wp-text-transform uppercase

Text transform of the segment button
$segment-button-wp-font-weight bold

Font weight of the segment button
$segment-button-wp-opacity .5

Opacity of the segment button
$segment-button-wp-opacity-activated 1

Opacity of the activated segment button
$segment-button-wp-opacity-disabled .3

Opacity of the disabled segment button
$segment-button-wp-icon-size 2.6rem

Size of an icon in the segment button
$segment-button-wp-icon-line-height $segment-button-wp-line-height

Line height of an icon in the segment button
$segment-button-wp-buttons-justify-content flex-start

Position of the buttons in the segment

Related

Segment Component Docs, Segment API Docs

API

Native

General