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>

Input Properties

Attr Type Details
value string

the value of the segment button. Required.

Output Events

Attr Details
ionSelect

expression to evaluate when a segment button has been clicked

Sass Variables

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 0 6px

Padding 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 0 6px

Padding 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