Chips

Class

Label Onlyw/ Trailing Iconw/ Leading Iconw/ Trailing + Leading Iconw/ Avatarw/ Avatar + Trailing Icon

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: $chip-gap;
    height: $chip-height;
    padding: $chip-padding-default;
    border-radius: $chip-border-radius;
    border: $chip-border;
    -webkit-transition: 0.2s;
    transition: 0.2s;
   .label {
      color: $color-on-surface-variant;
   }
}
.chip .icon {
    &.-leading {
      --md-icon-size: var(--chip-icon-size);
      color: $color-primary;
    }
    &.-trailing {
        --md-icon-size: var(--chip-icon-size);
        color: $color-on-surface-variant;
    }
    &.-avatar{
        --md-icon-size: var(--chip-avatar-size);
        width: $chip-avatar-size;
        height: $chip-avatar-size;
    }
    &.hidden{
        display: none;
    }
}

.chip-label {
  @include all-states;
}

    <div class="chip chip-label">
        <span class="label">Label</span>
    </div>

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: $chip-gap;
    height: $chip-height;
    padding: $chip-padding-default;
    border-radius: $chip-border-radius;
    border: $chip-border;
    -webkit-transition: 0.2s;
    transition: 0.2s;
   .label {
      color: $color-on-surface-variant;
   }
}
.chip .icon {
    &.-leading {
      --md-icon-size: var(--chip-icon-size);
      color: $color-primary;
    }
    &.-trailing {
        --md-icon-size: var(--chip-icon-size);
        color: $color-on-surface-variant;
    }
    &.-avatar{
        --md-icon-size: var(--chip-avatar-size);
        width: $chip-avatar-size;
        height: $chip-avatar-size;
    }
    &.hidden{
        display: none;
    }
}

.chip-trailing {
  padding-right: $chip-padding-icon;
  @include all-states;
}

    <div class="chip chip-trailing hover">
        <span class="label">Label</span>
        :material-close:{.icon .-trailing}
    </div>

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: $chip-gap;
    height: $chip-height;
    padding: $chip-padding-default;
    border-radius: $chip-border-radius;
    border: $chip-border;
    -webkit-transition: 0.2s;
    transition: 0.2s;
   .label {
      color: $color-on-surface-variant;
   }
}
.chip .icon {
    &.-leading {
      --md-icon-size: var(--chip-icon-size);
      color: $color-primary;
    }
    &.-trailing {
        --md-icon-size: var(--chip-icon-size);
        color: $color-on-surface-variant;
    }
    &.-avatar{
        --md-icon-size: var(--chip-avatar-size);
        width: $chip-avatar-size;
        height: $chip-avatar-size;
    }
    &.hidden{
        display: none;
    }
}

.chip-leading {
  padding-left: $chip-padding-icon;
  @include all-states;
}

    <div class="chip chip-leading">
        :material-taxi:{.icon .-leading}
        <span class="label">Label</span>
    </div>

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: $chip-gap;
    height: $chip-height;
    padding: $chip-padding-default;
    border-radius: $chip-border-radius;
    border: $chip-border;
    -webkit-transition: 0.2s;
    transition: 0.2s;
   .label {
      color: $color-on-surface-variant;
   }
}
.chip .icon {
    &.-leading {
      --md-icon-size: var(--chip-icon-size);
      color: $color-primary;
    }
    &.-trailing {
        --md-icon-size: var(--chip-icon-size);
        color: $color-on-surface-variant;
    }
    &.-avatar{
        --md-icon-size: var(--chip-avatar-size);
        width: $chip-avatar-size;
        height: $chip-avatar-size;
    }
    &.hidden{
        display: none;
    }
}

.chip-leading-trailing {
  padding-left: $chip-padding-icon;
  @include all-states;
}

    <div class="chip chip-leading-trailing">
        :material-taxi:{.icon .-leading}
        <span class="label">Label</span>
        :material-close:{.icon .-trailing}
    </div>

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: $chip-gap;
    height: $chip-height;
    padding: $chip-padding-default;
    border-radius: $chip-border-radius;
    border: $chip-border;
    -webkit-transition: 0.2s;
    transition: 0.2s;
   .label {
      color: $color-on-surface-variant;
   }
}
.chip .icon {
    &.-leading {
      --md-icon-size: var(--chip-icon-size);
      color: $color-primary;
    }
    &.-trailing {
        --md-icon-size: var(--chip-icon-size);
        color: $color-on-surface-variant;
    }
    &.-avatar{
        --md-icon-size: var(--chip-avatar-size);
        width: $chip-avatar-size;
        height: $chip-avatar-size;
    }
    &.hidden{
        display: none;
    }
}

.chip-avatar {
  padding-top: $chip-padding-avatar;
  padding-left: $chip-padding-avatar;
  padding-bottom: $chip-padding-avatar;
  @include avatar-fallback;
  @include all-states;
}

        <div class="chip chip-avatar">
            <img src="" class="icon -avatar">
            :material-account-circle:{.icon .-avatar}
            <span class="label">Label</span>
        </div>

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: $chip-gap;
    height: $chip-height;
    padding: $chip-padding-default;
    border-radius: $chip-border-radius;
    border: $chip-border;
    -webkit-transition: 0.2s;
    transition: 0.2s;
   .label {
      color: $color-on-surface-variant;
   }
}
.chip .icon {
    &.-leading {
      --md-icon-size: var(--chip-icon-size);
      color: $color-primary;
    }
    &.-trailing {
        --md-icon-size: var(--chip-icon-size);
        color: $color-on-surface-variant;
    }
    &.-avatar{
        --md-icon-size: var(--chip-avatar-size);
        width: $chip-avatar-size;
        height: $chip-avatar-size;
    }
    &.hidden{
        display: none;
    }
}

.chip-avatar-trailing {
  padding: $chip-padding-avatar;
  padding-right: $chip-padding-icon;
  @include avatar-fallback;
  @include all-states;
}

        <div class="chip chip-avatar-trailing">
            <img src="" class="icon -avatar">
            :material-account-circle:{.icon .-avatar}
            <span class="label">Label</span>
            :material-close:{.icon .-trailing}
        </div>