Chips

Class

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

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: var(--token-chip-spacing);
    height: var(--token-chip-height);
    padding: var(--token-chip-padding-defaults);
    background-color: var(--token-chip-color-state-layer);
    border-radius: var(--token-chip-corners);
    border: var(--token-chip-border-width) solid var(--token-chip-color-stroke);
    -webkit-transition: var(--token-chip-transition);
    transition: var(--token-chip-transition);
    cursor: pointer;
    .label {
      color: var(--token-chip-color-content);
    }
    &:hover,
    &.hover {
      background-color: var(--token-chip-color-state-layer-hovered);
    }

    &:focus,
    &.focus {
      background-color: var(--token-chip-color-state-layer-focused);
    }

    &:active,
    &.pressed {
      background-color: var(--token-chip-color-state-layer-pressed);
    }

    &:disabled, 
    &.disabled {
      border-color: var(--token-chip-color-stroke-disabled);
      pointer-events:none;
      .label, .icon {
        color: var(--token-chip-color-content-disabled) !important;
      }
    }
}

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

Label

States

DefaultHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.chip {
    display: flex;
    align-items: center;
    gap: var(--token-chip-spacing);
    height: var(--token-chip-height);
    padding: var(--token-chip-padding-defaults);
    background-color: var(--token-chip-color-state-layer);
    border-radius: var(--token-chip-corners);
    border: var(--token-chip-border-width) solid var(--token-chip-color-stroke);
    -webkit-transition: var(--token-chip-transition);
    transition: var(--token-chip-transition);
    cursor: pointer;
    .label {
      color: var(--token-chip-color-content);
    }
    &:hover,
    &.hover {
      background-color: var(--token-chip-color-state-layer-hovered);
    }

    &:focus,
    &.focus {
      background-color: var(--token-chip-color-state-layer-focused);
    }

    &:active,
    &.pressed {
      background-color: var(--token-chip-color-state-layer-pressed);
    }

    &:disabled, 
    &.disabled {
      border-color: var(--token-chip-color-stroke-disabled);
      pointer-events:none;
      .label, .icon {
        color: var(--token-chip-color-content-disabled) !important;
      }
    }
}

.chip-trailing {
  padding-right: var(--token-chip-padding-icon);
  @include trailing-icon;

}

    <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: var(--token-chip-spacing);
    height: var(--token-chip-height);
    padding: var(--token-chip-padding-defaults);
    background-color: var(--token-chip-color-state-layer);
    border-radius: var(--token-chip-corners);
    border: var(--token-chip-border-width) solid var(--token-chip-color-stroke);
    -webkit-transition: var(--token-chip-transition);
    transition: var(--token-chip-transition);
    cursor: pointer;
    .label {
      color: var(--token-chip-color-content);
    }
    &:hover,
    &.hover {
      background-color: var(--token-chip-color-state-layer-hovered);
    }

    &:focus,
    &.focus {
      background-color: var(--token-chip-color-state-layer-focused);
    }

    &:active,
    &.pressed {
      background-color: var(--token-chip-color-state-layer-pressed);
    }

    &:disabled, 
    &.disabled {
      border-color: var(--token-chip-color-stroke-disabled);
      pointer-events:none;
      .label, .icon {
        color: var(--token-chip-color-content-disabled) !important;
      }
    }
}

.chip-leading {
  padding-left: var(--token-chip-padding-icon);
  @include leading-icon;
}

    <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: var(--token-chip-spacing);
    height: var(--token-chip-height);
    padding: var(--token-chip-padding-defaults);
    background-color: var(--token-chip-color-state-layer);
    border-radius: var(--token-chip-corners);
    border: var(--token-chip-border-width) solid var(--token-chip-color-stroke);
    -webkit-transition: var(--token-chip-transition);
    transition: var(--token-chip-transition);
    cursor: pointer;
    .label {
      color: var(--token-chip-color-content);
    }
    &:hover,
    &.hover {
      background-color: var(--token-chip-color-state-layer-hovered);
    }

    &:focus,
    &.focus {
      background-color: var(--token-chip-color-state-layer-focused);
    }

    &:active,
    &.pressed {
      background-color: var(--token-chip-color-state-layer-pressed);
    }

    &:disabled, 
    &.disabled {
      border-color: var(--token-chip-color-stroke-disabled);
      pointer-events:none;
      .label, .icon {
        color: var(--token-chip-color-content-disabled) !important;
      }
    }
}

.chip-leading-trailing {
  padding-left: var(--token-chip-padding-icon);
  @include leading-icon;
  @include trailing-icon;

}

    <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: var(--token-chip-spacing);
    height: var(--token-chip-height);
    padding: var(--token-chip-padding-defaults);
    background-color: var(--token-chip-color-state-layer);
    border-radius: var(--token-chip-corners);
    border: var(--token-chip-border-width) solid var(--token-chip-color-stroke);
    -webkit-transition: var(--token-chip-transition);
    transition: var(--token-chip-transition);
    cursor: pointer;
    .label {
      color: var(--token-chip-color-content);
    }
    &:hover,
    &.hover {
      background-color: var(--token-chip-color-state-layer-hovered);
    }

    &:focus,
    &.focus {
      background-color: var(--token-chip-color-state-layer-focused);
    }

    &:active,
    &.pressed {
      background-color: var(--token-chip-color-state-layer-pressed);
    }

    &:disabled, 
    &.disabled {
      border-color: var(--token-chip-color-stroke-disabled);
      pointer-events:none;
      .label, .icon {
        color: var(--token-chip-color-content-disabled) !important;
      }
    }
}

.chip-avatar {
  padding-top: var(--token-chip-padding-avatar);
  padding-left: var(--token-chip-padding-avatar);
  padding-bottom: var(--token-chip-padding-avatar);
  @include avatar-icon;
}

        <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: var(--token-chip-spacing);
    height: var(--token-chip-height);
    padding: var(--token-chip-padding-defaults);
    background-color: var(--token-chip-color-state-layer);
    border-radius: var(--token-chip-corners);
    border: var(--token-chip-border-width) solid var(--token-chip-color-stroke);
    -webkit-transition: var(--token-chip-transition);
    transition: var(--token-chip-transition);
    cursor: pointer;
    .label {
      color: var(--token-chip-color-content);
    }
    &:hover,
    &.hover {
      background-color: var(--token-chip-color-state-layer-hovered);
    }

    &:focus,
    &.focus {
      background-color: var(--token-chip-color-state-layer-focused);
    }

    &:active,
    &.pressed {
      background-color: var(--token-chip-color-state-layer-pressed);
    }

    &:disabled, 
    &.disabled {
      border-color: var(--token-chip-color-stroke-disabled);
      pointer-events:none;
      .label, .icon {
        color: var(--token-chip-color-content-disabled) !important;
      }
    }
}

.chip-avatar-trailing {
  padding: var(--token-chip-padding-avatar);
  padding-right: var(--token-chip-padding-icon);
  @include avatar-icon;
  @include trailing-icon;
}

        <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>