Chip

`ion-chip`

Chips represent complex entities in small blocks, such as a contact.

Usage

<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

<ion-chip #chip1>
  <ion-label>Default</ion-label>
  <button ion-button clear color="light" (click)="delete(chip1)">
    <ion-icon name="close-circle"></ion-icon>
  </button>
</ion-chip>

<ion-chip #chip2>
  <ion-icon name="pin" color="primary"></ion-icon>
  <ion-label>With Icon</ion-label>
  <button ion-button (click)="delete(chip2)">
    <ion-icon name="close"></ion-icon>
  </button>
</ion-chip>

<ion-chip #chip3>
  <ion-avatar>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
  </ion-avatar>
  <ion-label>With Avatar</ion-label>
  <button ion-button clear color="dark" (click)="delete(chip3)">
    <ion-icon name="close-circle"></ion-icon>
  </button>
</ion-chip>

@Component({
  templateUrl: 'main.html'
})
class E2EPage {
  delete(chip: Element) {
    chip.remove();
  }
}

Sass Variables

All iOS Material Design Windows Platform

Property	Default	Description
`$chip-button-border-radius`	`50%`	Border radius of the button in the chip
`$chip-button-margin-top`	`0`	Margin top of the button in the chip
`$chip-button-margin-end`	`$chip-button-margin-top`	Margin end of the button in the chip
`$chip-button-margin-bottom`	`$chip-button-margin-top`	Margin bottom of the button in the chip
`$chip-button-margin-start`	`$chip-button-margin-end`	Margin start of the button in the chip
`$chip-button-size`	`32px`	Width and height of the button in the chip
`$chip-icon-border-radius`	`50%`	Border radius of the icon in the chip
`$chip-icon-text-align`	`center`	Text alignment of the icon in the chip
`$chip-icon-size`	`32px`	Width and height of the icon in the chip
`$chip-icon-font-size`	`18px`	Font size of the icon in the chip
`$chip-avatar-size`	`32px`	Width and height of the avatar in the chip
`$chip-avatar-border-radius`	`50%`	Border radius of the avatar in the chip

Property	Default	Description
`$chip-ios-margin-top`	`2px`	Margin top of the chip
`$chip-ios-margin-end`	`0`	Margin end of the chip
`$chip-ios-margin-bottom`	`$chip-ios-margin-top`	Margin bottom of the chip
`$chip-ios-margin-start`	`$chip-ios-margin-end`	Margin start of the chip
`$chip-ios-height`	`32px`	Height of the chip
`$chip-ios-border-radius`	`16px`	Border radius of the chip
`$chip-ios-font-size`	`13px`	Font size of the chip
`$chip-ios-text-color`	`rgba(0, 0, 0, .87)`	Text color of the chip
`$chip-ios-background-color`	`rgba(0, 0, 0, .12)`	Background color of the chip
`$chip-ios-label-margin-top`	`0`	Margin top of the label in the chip
`$chip-ios-label-margin-end`	`10px`	Margin end of the label in the chip
`$chip-ios-label-margin-bottom`	`$chip-ios-label-margin-top`	Margin bottom of the label in the chip
`$chip-ios-label-margin-start`	`$chip-ios-label-margin-end`	Margin start of the label in the chip
`$chip-ios-icon-background-color`	`color($colors-ios, primary)`	Background color of the icon in the chip
`$chip-ios-icon-text-color`	`color-contrast($colors-ios, $chip-ios-icon-background-color)`	Text color of the icon in the chip

Property	Default	Description
`$chip-md-margin-top`	`2px`	Margin top of the chip
`$chip-md-margin-end`	`0`	Margin end of the chip
`$chip-md-margin-bottom`	`$chip-md-margin-top`	Margin bottom of the chip
`$chip-md-margin-start`	`$chip-md-margin-end`	Margin start of the chip
`$chip-md-height`	`32px`	Height of the chip
`$chip-md-border-radius`	`16px`	Border radius of the chip
`$chip-md-font-size`	`13px`	Font size of the chip
`$chip-md-text-color`	`rgba(0, 0, 0, .87)`	Text color of the chip
`$chip-md-background-color`	`rgba(0, 0, 0, .12)`	Background color of the chip
`$chip-md-label-margin-top`	`0`	Margin top of the label in the chip
`$chip-md-label-margin-end`	`10px`	Margin end of the label in the chip
`$chip-md-label-margin-bottom`	`$chip-md-label-margin-top`	Margin bottom of the label in the chip
`$chip-md-label-margin-start`	`$chip-md-label-margin-end`	Margin start of the label in the chip
`$chip-md-icon-background-color`	`color($colors-md, primary)`	Background color of the icon in the chip
`$chip-md-icon-text-color`	`color-contrast($colors-md, $chip-md-icon-background-color)`	Text color of the icon in the chip

Property	Default	Description
`$chip-wp-margin-top`	`2px`	Margin top of the chip
`$chip-wp-margin-end`	`0`	Margin end of the chip
`$chip-wp-margin-bottom`	`$chip-wp-margin-top`	Margin bottom of the chip
`$chip-wp-margin-start`	`$chip-wp-margin-end`	Margin start of the chip
`$chip-wp-height`	`32px`	Height of the chip
`$chip-wp-border-radius`	`16px`	Border radius of the chip
`$chip-wp-font-size`	`13px`	Font size of the chip
`$chip-wp-text-color`	`rgba(0, 0, 0, .87)`	Text color of the chip
`$chip-wp-background-color`	`rgba(0, 0, 0, .12)`	Background color of the chip
`$chip-wp-label-margin-top`	`0`	Margin top of the label in the chip
`$chip-wp-label-margin-end`	`10px`	Margin end of the label in the chip
`$chip-wp-label-margin-bottom`	`$chip-wp-label-margin-top`	Margin bottom of the label in the chip
`$chip-wp-label-margin-start`	`$chip-wp-label-margin-end`	Margin start of the label in the chip
`$chip-wp-icon-background-color`	`color($colors-wp, primary)`	Background color of the icon in the chip
`$chip-wp-icon-text-color`	`color-contrast($colors-wp, $chip-wp-icon-background-color)`	Text color of the icon in the chip

Chip

`ion-chip`

Usage

Advanced

Sass Variables

API

Native

General