diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx
new file mode 100644
index 0000000000..e0ecd74167
--- /dev/null
+++ b/packages/core/src/components/chip-button/chip-button.tsx
@@ -0,0 +1,106 @@
+import { Component, CssClassObject, h, Prop } from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-chip-button'
+})
+export class ChipButton {
+  $el: HTMLElement;
+  mode: string;
+  color: string;
+
+  @Prop() href: string;
+
+  /**
+   * @Prop {boolean} If true, activates a transparent button style.
+   */
+  @Prop() clear: boolean = false;
+
+  /**
+   * @Prop {boolean} If true, sets the button into a disabled state.
+   */
+  @Prop() disabled: boolean = false;
+
+  /**
+   * @hidden
+   * Get the classes based on the button type
+   * e.g. alert-button, action-sheet-button
+   */
+  getButtonClassList(buttonType: string, mode: string): string[] {
+    if (!buttonType) {
+      return [];
+    }
+    return [
+      buttonType,
+      `${buttonType}-${mode}`
+    ];
+  }
+
+  /**
+   * @hidden
+   * Get the classes for the color
+   */
+  getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
+    let className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
+
+    return [`${className}-${mode}`].concat(
+        style !== 'default' ? `${className}` : [],
+        color ? `${className}-${mode}-${color}` : []
+      );
+  }
+
+  /**
+   * @hidden
+   * Get the classes for the style
+   * Chip buttons can only be clear or default (solid)
+   */
+  getStyleClassList(buttonType: string): string[] {
+    let classList = [].concat(
+      this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : []
+    );
+
+    if (classList.length === 0) {
+      classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
+    }
+
+    return classList;
+  }
+
+  /**
+   * @hidden
+   * Get the element classes to add to the child element
+   */
+  getElementClassList() {
+    let classList = [].concat(
+      this.$el.className.length ? this.$el.className.split(' ') : []
+    );
+
+    return classList;
+  }
+
+  render() {
+    const buttonType = 'chip-button';
+
+    var buttonClasses: CssClassObject = []
+      .concat(
+        this.getButtonClassList(buttonType, this.mode),
+        this.getElementClassList(),
+        this.getStyleClassList(buttonType)
+      )
+      .reduce((prevValue, cssClass) => {
+        prevValue[cssClass] = true;
+        return prevValue;
+      }, {});
+
+    const TagType = this.href ? 'a' : 'button';
+
+    return (
+      <TagType class={buttonClasses} disabled={this.disabled}>
+        <span class='button-inner'>
+          <slot></slot>
+        </span>
+        <div class='button-effect'></div>
+      </TagType>
+    );
+  }
+}
diff --git a/packages/core/src/components/chip/chip.ios.scss b/packages/core/src/components/chip/chip.ios.scss
new file mode 100644
index 0000000000..044eb10996
--- /dev/null
+++ b/packages/core/src/components/chip/chip.ios.scss
@@ -0,0 +1,142 @@
+@import "../../themes/ionic.globals.ios";
+@import "./chip";
+
+// iOS Chip
+// --------------------------------------------------
+
+/// @prop - Margin top of the chip
+$chip-ios-margin-top:                       2px !default;
+
+/// @prop - Margin end of the chip
+$chip-ios-margin-end:                       0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-ios-margin-bottom:                    $chip-ios-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-ios-margin-start:                     $chip-ios-margin-end !default;
+
+/// @prop - Height of the chip
+$chip-ios-height:                           32px !default;
+
+/// @prop - Border radius of the chip
+$chip-ios-border-radius:                    16px !default;
+
+/// @prop - Font size of the chip
+$chip-ios-font-size:                        13px !default;
+
+/// @prop - Text color of the chip
+$chip-ios-text-color:                       rgba(0, 0, 0, .87) !default;
+
+/// @prop - Background color of the chip
+$chip-ios-background-color:                 rgba(0, 0, 0, .12) !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-ios-label-margin-top:                 0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-ios-label-margin-end:                 10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-ios-label-margin-bottom:              $chip-ios-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-ios-label-margin-start:               $chip-ios-label-margin-end !default;
+
+/// @prop - Background color of the icon in the chip
+$chip-ios-icon-background-color:            color($colors-ios, primary) !default;
+
+/// @prop - Fill color of the icon in the chip
+$chip-ios-icon-fill-color:                  color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
+
+/// @prop - Background color of the chip button
+$chip-ios-button-background-color:          color($colors-ios, primary) !default;
+
+/// @prop - Fill color of the icon in the chip button
+$chip-ios-button-icon-fill-color:           color-contrast($colors-ios, $chip-ios-button-background-color) !default;
+
+/// @prop - Background color of the clear chip button
+$chip-ios-button-clear-background-color:    transparent !default;
+
+/// @prop - Text color of the clear chip button
+$chip-ios-button-clear-text-color:          color($colors-ios, primary) !default;
+
+/// @prop - Fill color of the icon in the clear chip button
+$chip-ios-button-clear-icon-fill-color:     color($colors-ios, primary) !default;
+
+
+.chip-ios {
+  @include border-radius($chip-ios-border-radius);
+  @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start);
+
+  height: $chip-ios-height;
+
+  font-size: $chip-ios-font-size;
+  line-height: $chip-ios-height;
+  color: $chip-ios-text-color;
+  background: $chip-ios-background-color;
+}
+
+.chip-ios > ion-label {
+  @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start);
+}
+
+.chip-ios > ion-icon {
+  fill: $chip-ios-icon-fill-color;
+  background-color: $chip-ios-icon-background-color;
+}
+
+// iOS Chip Button
+// --------------------------------------------------
+
+.chip-button-ios {
+  background-color: $chip-ios-button-background-color;
+}
+
+.chip-button-ios .icon {
+  fill: $chip-ios-button-icon-fill-color;
+}
+
+
+// iOS Clear Chip Button
+// --------------------------------------------------
+
+.chip-button-clear-ios {
+  background-color: $chip-ios-button-clear-background-color;
+  color: $chip-ios-button-clear-text-color;
+}
+
+.chip-button-clear-ios .icon {
+  fill: $chip-ios-button-clear-icon-fill-color;
+}
+
+
+// Generate iOS Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .chip-ios-#{$color-name},
+  .chip-button-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-ios-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+
+  .chip-ios .icon-ios-#{$color-name} {
+    fill: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-clear-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+  .chip-button-clear-ios-#{$color-name} .icon {
+    fill: $color-base;
+  }
+
+}
diff --git a/packages/core/src/components/chip/chip.md.scss b/packages/core/src/components/chip/chip.md.scss
new file mode 100644
index 0000000000..96d9127aff
--- /dev/null
+++ b/packages/core/src/components/chip/chip.md.scss
@@ -0,0 +1,144 @@
+@import "../../themes/ionic.globals.md";
+@import "./chip";
+
+// Material Design Chip
+// --------------------------------------------------
+
+/// @prop - Margin top of the chip
+$chip-md-margin-top:                       2px !default;
+
+/// @prop - Margin end of the chip
+$chip-md-margin-end:                       0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-md-margin-bottom:                    $chip-md-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-md-margin-start:                     $chip-md-margin-end !default;
+
+/// @prop - Height of the chip
+$chip-md-height:                           32px !default;
+
+/// @prop - Border radius of the chip
+$chip-md-border-radius:                    16px !default;
+
+/// @prop - Font size of the chip
+$chip-md-font-size:                        13px !default;
+
+/// @prop - Text color of the chip
+$chip-md-text-color:                       rgba(0, 0, 0, .87) !default;
+
+/// @prop - Background color of the chip
+$chip-md-background-color:                 rgba(0, 0, 0, .12) !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-md-label-margin-top:                 0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-md-label-margin-end:                 10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-md-label-margin-bottom:              $chip-md-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-md-label-margin-start:               $chip-md-label-margin-end !default;
+
+/// @prop - Background color of the icon in the chip
+$chip-md-icon-background-color:            color($colors-md, primary) !default;
+
+/// @prop - Fill color of the icon in the chip
+$chip-md-icon-fill-color:                  color-contrast($colors-md, $chip-md-icon-background-color) !default;
+
+/// @prop - Background color of the chip button
+$chip-md-button-background-color:          color($colors-md, primary) !default;
+
+/// @prop - Fill color of the icon in the chip button
+$chip-md-button-icon-fill-color:           color-contrast($colors-md, $chip-md-button-background-color) !default;
+
+/// @prop - Background color of the clear chip button
+$chip-md-button-clear-background-color:    transparent !default;
+
+/// @prop - Text color of the clear chip button
+$chip-md-button-clear-text-color:          color($colors-md, primary) !default;
+
+/// @prop - Fill color of the icon in the clear chip button
+$chip-md-button-clear-icon-fill-color:     color($colors-md, primary) !default;
+
+
+.chip-md {
+  @include border-radius($chip-md-border-radius);
+
+  height: $chip-md-height;
+
+  font-size: $chip-md-font-size;
+  line-height: $chip-md-height;
+  color: $chip-md-text-color;
+  background: $chip-md-background-color;
+
+  @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
+}
+
+.chip-md > ion-label {
+  @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start);
+}
+
+.chip-md > ion-icon {
+  fill: $chip-md-icon-fill-color;
+  background-color: $chip-md-icon-background-color;
+}
+
+
+// Material Design Chip Button
+// --------------------------------------------------
+
+.chip-button-md {
+  background-color: $chip-md-button-background-color;
+}
+
+.chip-button-md .icon {
+  fill: $chip-md-button-icon-fill-color;
+}
+
+
+// Material Design Clear Chip Button
+// --------------------------------------------------
+
+.chip-button-clear-md {
+  background-color: $chip-md-button-clear-background-color;
+  color: $chip-md-button-clear-text-color;
+}
+
+.chip-button-clear-md .icon {
+  fill: $chip-md-button-clear-icon-fill-color;
+}
+
+
+// Generate Material Design Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .chip-md-#{$color-name},
+  .chip-button-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-md-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+
+  .chip-md .icon-md-#{$color-name} {
+    fill: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-clear-md-#{$color-name} {
+    color: $color-base;
+  }
+
+  .chip-button-clear-md-#{$color-name} .icon {
+    fill: $color-base;
+  }
+
+}
diff --git a/packages/core/src/components/chip/chip.scss b/packages/core/src/components/chip/chip.scss
new file mode 100644
index 0000000000..a7d5e33914
--- /dev/null
+++ b/packages/core/src/components/chip/chip.scss
@@ -0,0 +1,94 @@
+@import "../../themes/ionic.globals";
+
+// Chip
+// --------------------------------------------------
+
+/// @prop - Border radius of the button in the chip
+$chip-button-border-radius:     50% !default;
+
+/// @prop - Margin top of the button in the chip
+$chip-button-margin-top:        0 !default;
+
+/// @prop - Margin end of the button in the chip
+$chip-button-margin-end:        $chip-button-margin-top !default;
+
+/// @prop - Margin bottom of the button in the chip
+$chip-button-margin-bottom:     $chip-button-margin-top !default;
+
+/// @prop - Margin start of the button in the chip
+$chip-button-margin-start:      $chip-button-margin-end !default;
+
+/// @prop - Width and height of the button in the chip
+$chip-button-size:              32px !default;
+
+/// @prop - Border radius of the icon in the chip
+$chip-icon-border-radius:       50% !default;
+
+/// @prop - Text alignment of the icon in the chip
+$chip-icon-text-align:          center !default;
+
+/// @prop - Width and height of the icon in the chip
+$chip-icon-size:                32px !default;
+
+/// @prop - Font size of the icon in the chip
+$chip-icon-font-size:           18px !default;
+
+/// @prop - Line height of the icon in the chip
+$chip-icon-line-height:         36px !default;
+
+/// @prop - Width and height of the avatar in the chip
+$chip-avatar-size:              32px !default;
+
+/// @prop - Border radius of the avatar in the chip
+$chip-avatar-border-radius:     50% !default;
+
+
+ion-chip {
+  display: inline-flex;
+
+  align-self: center;
+
+  font-weight: normal;
+  vertical-align: middle;
+
+  box-sizing: border-box;
+}
+
+ion-chip .chip-button {
+  @include border-radius($chip-button-border-radius);
+  @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
+
+  width: $chip-button-size;
+  height: $chip-button-size;
+}
+
+ion-chip ion-icon {
+  @include text-align($chip-icon-text-align);
+  @include border-radius($chip-icon-border-radius);
+
+  width: $chip-icon-size;
+  height: $chip-icon-size;
+
+  font-size: $chip-icon-font-size;
+  line-height: $chip-icon-line-height;
+}
+
+ion-chip ion-avatar {
+  @include border-radius($chip-avatar-border-radius);
+
+  width: $chip-avatar-size;
+  min-width: $chip-avatar-size;
+  height: $chip-avatar-size;
+  min-height: $chip-avatar-size;
+}
+
+ion-chip ion-avatar img {
+  @include border-radius($chip-avatar-border-radius);
+
+  display: block;
+
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
new file mode 100644
index 0000000000..0a5d22b188
--- /dev/null
+++ b/packages/core/src/components/chip/chip.tsx
@@ -0,0 +1,105 @@
+import { Component, h } from '@stencil/core';
+
+/**
+  * @name Chip
+  * @module ionic
+  * @description
+  * Chips represent complex entities in small blocks, such as a contact.
+  *
+  *
+  * @usage
+  *
+  * ```html
+  * <ion-chip>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-label color="secondary">Secondary Label</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip color="secondary">
+  *   <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip color="danger">
+  *   <ion-label>Danger</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-icon name="pin"></ion-icon>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-icon name="heart" color="dark"></ion-icon>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-avatar>
+  *     <img src="assets/img/my-img.png">
+  *   </ion-avatar>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  * ```
+  *
+  *
+  * @advanced
+  *
+  * ```html
+  * <ion-chip #chip1>
+  *   <ion-label>Default</ion-label>
+  *   <ion-button clear color="light" (click)="delete(chip1)">
+  *     <ion-icon name="close-circle"></ion-icon>
+  *   </ion-button>
+  * </ion-chip>
+  *
+  * <ion-chip #chip2>
+  *   <ion-icon name="pin" color="primary"></ion-icon>
+  *   <ion-label>With Icon</ion-label>
+  *   <ion-button (click)="delete(chip2)">
+  *     <ion-icon name="close"></ion-icon>
+  *   </ion-button>
+  * </ion-chip>
+  *
+  * <ion-chip #chip3>
+  *   <ion-avatar>
+  *     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+  *   </ion-avatar>
+  *   <ion-label>With Avatar</ion-label>
+  *   <ion-button clear color="dark" (click)="delete(chip3)">
+  *     <ion-icon name="close-circle"></ion-icon>
+  *   </ion-button>
+  * </ion-chip>
+  * ```
+  *
+  * ```ts
+  * @Component({
+  *   templateUrl: 'main.html'
+  * })
+  * class E2EPage {
+  *   delete(chip: Element) {
+  *     chip.remove();
+  *   }
+  * }
+  * ```
+  *
+  * @demo /docs/demos/src/chip/
+ **/
+@Component({
+  tag: 'ion-chip',
+  styleUrls: {
+    ios: 'chip.ios.scss',
+    md: 'chip.md.scss',
+    wp: 'chip.wp.scss'
+  },
+  host: {
+    theme: 'chip'
+  }
+})
+export class Chip {
+  render() {
+    return <slot></slot>;
+  }
+}
diff --git a/packages/core/src/components/chip/chip.wp.scss b/packages/core/src/components/chip/chip.wp.scss
new file mode 100644
index 0000000000..f5eccd1f69
--- /dev/null
+++ b/packages/core/src/components/chip/chip.wp.scss
@@ -0,0 +1,143 @@
+@import "../../themes/ionic.globals.wp";
+@import "./chip";
+
+// Windows Chip
+// --------------------------------------------------
+
+/// @prop - Margin top of the chip
+$chip-wp-margin-top:                       2px !default;
+
+/// @prop - Margin end of the chip
+$chip-wp-margin-end:                       0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-wp-margin-bottom:                    $chip-wp-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-wp-margin-start:                     $chip-wp-margin-end !default;
+
+/// @prop - Height of the chip
+$chip-wp-height:                           32px !default;
+
+/// @prop - Border radius of the chip
+$chip-wp-border-radius:                    16px !default;
+
+/// @prop - Font size of the chip
+$chip-wp-font-size:                        13px !default;
+
+/// @prop - Text color of the chip
+$chip-wp-text-color:                       rgba(0, 0, 0, .87) !default;
+
+/// @prop - Background color of the chip
+$chip-wp-background-color:                 rgba(0, 0, 0, .12) !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-wp-label-margin-top:                 0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-wp-label-margin-end:                 10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-wp-label-margin-bottom:              $chip-wp-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-wp-label-margin-start:               $chip-wp-label-margin-end !default;
+
+/// @prop - Background color of the icon in the chip
+$chip-wp-icon-background-color:            color($colors-wp, primary) !default;
+
+/// @prop - Fill color of the icon in the chip
+$chip-wp-icon-fill-color:                  color-contrast($colors-wp, $chip-wp-icon-background-color) !default;
+
+/// @prop - Background color of the chip button
+$chip-wp-button-background-color:          color($colors-wp, primary) !default;
+
+/// @prop - Fill color of the icon in the chip button
+$chip-wp-button-icon-fill-color:           color-contrast($colors-wp, $chip-wp-button-background-color) !default;
+
+/// @prop - Background color of the clear chip button
+$chip-wp-button-clear-background-color:    transparent !default;
+
+/// @prop - Text color of the clear chip button
+$chip-wp-button-clear-text-color:          color($colors-wp, primary) !default;
+
+/// @prop - Fill color of the icon in the clear chip button
+$chip-wp-button-clear-icon-fill-color:     color($colors-wp, primary) !default;
+
+
+.chip-wp {
+  @include border-radius($chip-wp-border-radius);
+
+  height: $chip-wp-height;
+
+  font-size: $chip-wp-font-size;
+  line-height: $chip-wp-height;
+  color: $chip-wp-text-color;
+  background: $chip-wp-background-color;
+
+  @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start);
+}
+
+.chip-wp > ion-label {
+  @include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start);
+}
+
+.chip-wp > ion-icon {
+  fill: $chip-wp-icon-fill-color;
+  background-color: $chip-wp-icon-background-color;
+}
+
+
+// Material Design Chip Button
+// --------------------------------------------------
+
+.chip-button-wp {
+  background-color: $chip-wp-button-background-color;
+}
+
+.chip-button-wp .icon {
+  fill: $chip-wp-button-icon-fill-color;
+}
+
+
+// Material Design Clear Chip Button
+// --------------------------------------------------
+
+.chip-button-clear-wp {
+  background-color: $chip-wp-button-clear-background-color;
+  color: $chip-wp-button-clear-text-color;
+}
+
+.chip-button-clear-wp .icon {
+  fill: $chip-wp-button-clear-icon-fill-color;
+}
+
+// Generate Windows Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .chip-wp-#{$color-name},
+  .chip-button-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-wp-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+
+  .chip-wp .icon-wp-#{$color-name} {
+    fill: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-clear-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+  .chip-button-clear-wp-#{$color-name} .icon {
+    fill: $color-base;
+  }
+
+}
diff --git a/packages/core/src/components/chip/test/basic.html b/packages/core/src/components/chip/test/basic.html
new file mode 100644
index 0000000000..395a1de7db
--- /dev/null
+++ b/packages/core/src/components/chip/test/basic.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Chips</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Header</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding style="text-align: center">
+      <h2>Text Chips</h2>
+
+      <ion-chip>
+        <ion-label>Default</ion-label>
+      </ion-chip>
+
+      <ion-chip>
+        <ion-label color="secondary">Secondary Label</ion-label>
+      </ion-chip>
+
+      <ion-chip>
+        <ion-label>Another With Longer Text</ion-label>
+      </ion-chip>
+
+      <h2>Color Chips</h2>
+
+      <ion-chip color="primary">
+        <ion-icon name="heart" color="dark"></ion-icon>
+        <ion-label>Primary</ion-label>
+      </ion-chip>
+
+      <ion-chip color="secondary">
+        <ion-label color="dark">Secondary w/ Dark label</ion-label>
+      </ion-chip>
+
+      <ion-chip color="danger">
+        <ion-label>Danger</ion-label>
+      </ion-chip>
+
+      <h2>Icon Chips</h2>
+
+      <ion-chip>
+        <ion-icon name="pin"></ion-icon>
+      <ion-label>Default</ion-label>
+      </ion-chip>
+
+      <ion-chip>
+        <ion-label>Secondary</ion-label>
+        <ion-icon name="pin" color="secondary"></ion-icon>
+      </ion-chip>
+
+      <h2>Avatar Chips</h2>
+
+      <ion-chip>
+        <ion-avatar>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+        </ion-avatar>
+        <ion-label>Default</ion-label>
+      </ion-chip>
+
+      <ion-chip>
+        <ion-label>Right Avatar</ion-label>
+        <ion-avatar>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+        </ion-avatar>
+      </ion-chip>
+
+      <h2>del Chips</h2>
+
+      <ion-chip id="chip1">
+        <ion-label>Default</ion-label>
+        <ion-chip-button clear onclick="del('chip1')">
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip-button>
+      </ion-chip>
+
+      <ion-chip id="chip2">
+        <ion-icon name="pin" color="primary"></ion-icon>
+        <ion-label>With Icon</ion-label>
+        <ion-chip-button onclick="del('chip2')">
+          <ion-icon name="close"></ion-icon>
+        </ion-chip-button>
+      </ion-chip>
+
+      <ion-chip id="chip3">
+        <ion-avatar>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+        </ion-avatar>
+        <ion-label>With Avatar</ion-label>
+        <ion-chip-button clear color="dark" onclick="del('chip3')">
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip-button>
+      </ion-chip>
+
+      <ion-item>
+        <ion-label>Chip Item</ion-label>
+        <ion-chip slot="end" id="chip4">
+          <ion-icon name="pin" color="primary"></ion-icon>
+          <ion-label>Default</ion-label>
+          <ion-chip-button clear color="light" onclick="del('chip4')">
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip-button>
+        </ion-chip>
+      </ion-item>
+    </ion-content>
+
+    <script>
+      function del(chip) {
+        console.log('called del', chip);
+        var delChip = document.getElementById(chip);
+        delChip.parentNode.removeChild(delChip);
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js
index 5b57a0550d..143977c4ef 100644
--- a/packages/core/stencil.config.js
+++ b/packages/core/stencil.config.js
@@ -8,6 +8,7 @@ exports.config = {
     { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
     { components: ['ion-button', 'ion-buttons', 'ion-icon'] },
     { components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title'] },
+    { components: ['ion-chip', 'ion-chip-button'] },
     { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
     { components: ['ion-gesture', 'ion-scroll'], priority: 'low' },
     { components: ['ion-grid', 'ion-row', 'ion-col'] },
diff --git a/packages/ionic-angular/BREAKING.md b/packages/ionic-angular/BREAKING.md
index e6c50fcf5f..c0a4e0940f 100644
--- a/packages/ionic-angular/BREAKING.md
+++ b/packages/ionic-angular/BREAKING.md
@@ -5,6 +5,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
 
 - [Dynamic Mode](#dynamic-mode)
 - [Button](#button)
+- [Chip](#chip)
 - [FAB](#fab)
 - [Fixed Content](#fixed-content)
 - [Icon](#icon)
@@ -97,6 +98,34 @@ These have been renamed to the following, and moved from the button element to t
 </ion-button>
 ```
 
+## Chip
+
+### Markup Changed
+
+Buttons inside of an `<ion-chip>` container should now be written as an `<ion-chip-button>` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute.
+
+**Old Usage Example:**
+
+```html
+<ion-chip>
+  <ion-label>Default</ion-label>
+  <ion-button clear color="light">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-button>
+</ion-chip>
+```
+
+**New Usage Example:**
+
+```html
+<ion-chip>
+  <ion-label>Default</ion-label>
+  <ion-chip-button clear color="light">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+```
+
 ## FAB
 
 ### Markup Changed