diff --git a/packages/core/src/components/segment-button/readme.md b/packages/core/src/components/segment-button/readme.md
index e6bc9e37ad..afae4865a4 100644
--- a/packages/core/src/components/segment-button/readme.md
+++ b/packages/core/src/components/segment-button/readme.md
@@ -1,11 +1,11 @@
 # ion-segment-button
 
-The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
+Segment buttons are a group of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. Only one segment button can be selected at a time.
 
 ```html
 <ion-content>
   <!-- Segment buttons with icons -->
-  <ion-segment [(ngModel)]="icons" color="secondary">
+  <ion-segment>
     <ion-segment-button value="camera">
       <ion-icon name="camera"></ion-icon>
     </ion-segment-button>
@@ -15,11 +15,11 @@ The child buttons of the `ion-segment` component. Each `ion-segment-button` must
   </ion-segment>
 
   <!-- Segment buttons with text -->
-  <ion-segment [(ngModel)]="relationship" color="primary">
-    <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
+  <ion-segment>
+    <ion-segment-button value="friends">
       Friends
     </ion-segment-button>
-    <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
+    <ion-segment-button value="enemies">
       Enemies
     </ion-segment-button>
   </ion-segment>
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index ed6170a780..cbe183a7a2 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -1,6 +1,7 @@
 import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
 import { createThemedClasses, getElementClassMap } from '../../utils/theme';
 
+let ids = 0;
 
 @Component({
   tag: 'ion-segment-button'
@@ -10,11 +11,6 @@ export class SegmentButton {
 
   @Element() private el: HTMLElement;
 
-  /**
-   * Emitted when the segment button is clicked.
-   */
-  @Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
-
   @Prop({ mutable: true }) activated = false;
 
   /**
@@ -32,12 +28,12 @@ export class SegmentButton {
   /**
    * If true, the segment button is selected. Defaults to `false`.
    */
-  @Prop({ mutable: true }) checked = false;
+  @Prop() checked = false;
 
   /*
    * If true, the user cannot interact with the segment button. Default false.
    */
-  @Prop({ mutable: true }) disabled = false;
+  @Prop() disabled = false;
 
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
@@ -50,6 +46,17 @@ export class SegmentButton {
    */
   @Prop({ mutable: true }) value: string;
 
+  /**
+   * Emitted when the segment button is clicked.
+   */
+  @Event() ionClick: EventEmitter;
+
+  componentWillLoad() {
+    if (!this.value) {
+      this.value = `ion-sb-${ids++}`;
+    }
+  }
+
   /**
    * Emit the click event to the parent segment
    */
@@ -87,11 +94,3 @@ export class SegmentButton {
     ];
   }
 }
-
-export interface SegmentButtonEvent extends CustomEvent {
-  detail: SegmentButtonEventDetail;
-}
-
-export interface SegmentButtonEventDetail {
-
-}
diff --git a/packages/core/src/components/segment/test/basic/index.html b/packages/core/src/components/segment/test/basic/index.html
index 75137469cb..3414242212 100644
--- a/packages/core/src/components/segment/test/basic/index.html
+++ b/packages/core/src/components/segment/test/basic/index.html
@@ -44,6 +44,18 @@
         </ion-toolbar>
 
         <div padding>
+          <ion-segment>
+            <ion-segment-button>Seg 1</ion-segment-button>
+            <ion-segment-button>Seg 2</ion-segment-button>
+            <ion-segment-button>Seg 3</ion-segment-button>
+          </ion-segment>
+
+          <ion-segment disabled>
+            <ion-segment-button>Seg 2 1</ion-segment-button>
+            <ion-segment-button checked>Seg 2 2</ion-segment-button>
+            <ion-segment-button>Seg 2 3</ion-segment-button>
+          </ion-segment>
+
           <ion-segment color="dark" value="Reading List">
             <ion-segment-button value="Bookmarks">
               <ion-icon name="book"></ion-icon>
diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts
index cdbaf7f4c4..03d43541d4 100644
--- a/packages/core/src/index.d.ts
+++ b/packages/core/src/index.d.ts
@@ -89,7 +89,7 @@ export { Reorder } from './components/reorder/reorder';
 export { Scroll, ScrollCallback, ScrollDetail } from './components/scroll/scroll';
 export { Searchbar } from './components/searchbar/searchbar';
 export { Segment } from './components/segment/segment';
-export { SegmentButton, SegmentButtonEvent } from './components/segment-button/segment-button';
+export { SegmentButton } from './components/segment-button/segment-button';
 export { SelectPopoverOption, SelectPopover } from './components/select-popover/select-popover';
 export { Select } from './components/select/select';
 export { SelectOption } from './components/select-option/select-option';