chip

Chips are interactive elements and should be presented as a group to narrow down a topic. Among other things, chips enable searching or filtering content using keywords.

table of content

component variations

default

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip"
  role="button"
  aria-labelledby="chip-label-id-default"
>
  <span id="chip-label-id-default" class="a-chip__label">Label</span>
</div>

image

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip -image"
  role="button"
  aria-labelledby="chip-label-id-image"
>
  <div
    class="a-chip__image"
    style="background-image:url(&#x27;https://brandguide-cdn.azureedge.net/frontend-kit/chip-avatar.jpg&#x27;)"
  ></div>
  <span id="chip-label-id-image" class="a-chip__label">Label</span>
</div>

close button

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip -btnClose"
  role="button"
  aria-labelledby="chip-label-id-close-button"
>
  <span id="chip-label-id-close-button" class="a-chip__label">Label</span>
  <i class="a-icon a-chip__close ui-ic-close-small"></i>
</div>

close button image

Open on blank page
Longer Label
<div
  tabindex="0"
  class="a-chip -btnClose -image"
  role="button"
  aria-labelledby="chip-label-id-close-button image"
>
  <div
    class="a-chip__image"
    style="background-image:url(&#x27;https://brandguide-cdn.azureedge.net/frontend-kit/chip-avatar.jpg&#x27;)"
  ></div>
  <span id="chip-label-id-close-button image" class="a-chip__label">
    Longer Label
  </span>
  <i class="a-icon a-chip__close ui-ic-close-small"></i>
</div>

with icon and label

Open on blank page
Longer Label
<div
  tabindex="0"
  class="a-chip -icon"
  role="button"
  aria-labelledby="chip-label-id-with-icon and label"
>
  <i class="a-icon a-chip__icon boschicon-bosch-ic-notification"></i>
  <span id="chip-label-id-with-icon and label" class="a-chip__label">
    Longer Label
  </span>
</div>

with icon, label and close button

Open on blank page
Longer Label
<div
  tabindex="0"
  class="a-chip -btnClose -icon"
  role="button"
  aria-labelledby="chip-label-id-with-icon, label and close button"
>
  <i class="a-icon a-chip__icon boschicon-bosch-ic-notification"></i>
  <span
    id="chip-label-id-with-icon, label and close button"
    class="a-chip__label"
  >
    Longer Label
  </span>
  <i class="a-icon a-chip__close ui-ic-close-small"></i>
</div>

fixed

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip a-chip--fixed"
  role="button"
  aria-labelledby="chip-label-id-fixed"
>
  <span id="chip-label-id-fixed" class="a-chip__label">Label</span>
</div>

close button image fixed

Open on blank page
Longer Label
<div
  tabindex="0"
  class="a-chip a-chip--fixed -btnClose -image"
  role="button"
  aria-labelledby="chip-label-id-close-button image fixed"
>
  <div class="fixed-width-image-label-group">
    <div
      class="a-chip__image"
      style="background-image:url(&#x27;https://brandguide-cdn.azureedge.net/frontend-kit/chip-avatar.jpg&#x27;)"
    ></div>
    <span id="chip-label-id-close-button image fixed" class="a-chip__label">
      Longer Label
    </span>
    <i class="a-icon a-chip__close ui-ic-close-small"></i>
  </div>
</div>

selected

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip -selected"
  role="button"
  aria-labelledby="chip-label-id-selected"
>
  <span id="chip-label-id-selected" class="a-chip__label">Label</span>
</div>

dragged

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip -dragged"
  role="button"
  aria-labelledby="chip-label-id-dragged"
>
  <span id="chip-label-id-dragged" class="a-chip__label">Label</span>
</div>

disabled

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip -disabled"
  role="button"
  aria-labelledby="chip-label-id-disabled"
  aria-disabled="true"
>
  <span id="chip-label-id-disabled" class="a-chip__label">Label</span>
</div>

disabled selected

Open on blank page
Label
<div
  tabindex="0"
  class="a-chip -disabled -selected"
  role="button"
  aria-labelledby="chip-label-id-disabled-selected"
  aria-disabled="true"
>
  <span id="chip-label-id-disabled-selected" class="a-chip__label">Label</span>
</div>

two chips

Open on blank page
Label
Label
<div
  tabindex="0"
  class="a-chip"
  role="button"
  aria-labelledby="chip-label-id-two-chips"
>
  <span id="chip-label-id-two-chips" class="a-chip__label">Label</span>
</div>
<div
  tabindex="0"
  class="a-chip"
  role="button"
  aria-labelledby="chip-label-id-two-chips-02"
>
  <span id="chip-label-id-two-chips-02" class="a-chip__label">Label</span>
</div>

additional content

styles SCSS

.a-chip {
  background-color: var(--neutral__enabled__fill__default);
  color: var(--neutral__enabled__front__default);
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  height: 2rem;
  width: auto;
  border-radius: 1rem;
  cursor: pointer;
  margin-right: 1rem;

  &:last-of-type {
    margin-right: 0;
  }

  &:hover {
    background-color: var(--neutral__enabled__fill__hovered);
    color: var(--neutral__enabled__front__hovered);
  }

  &:active {
    background-color: var(--neutral__enabled__fill__pressed);
    color: var(--neutral__enabled__front__pressed);
  }

  &:focus-visible {
    @include focus-outside;
    --focus-border-radius: 1rem;
  }

  &.-disabled {
    background-color: var(--neutral__disabled__fill__default);
    color: var(--neutral__disabled__front__default);
  }

  &.-selected {
    background-color: var(--major-accent__enabled__fill__default);
    color: var(--major-accent__enabled__front__default);

    &:hover {
      background-color: var(--major-accent__enabled__fill__hovered);
      color: var(--major-accent__enabled__front__hovered);
    }

    &:active {
      background-color: var(--major-accent__enabled__fill__pressed);
      color: var(--major-accent__enabled__front__pressed);
    }

    &.-disabled {
      background-color: var(--major-accent__disabled__fill__default);
      color: var(--major-accent__disabled__front__default);
    }
  }

  &.-dragged {
    background-color: var(--bosch-white);

    @include box-shadow;
  }

  &.-icon {
    .a-chip__label {
      margin-left: 0;
    }

    &.-btnClose .a-chip__label {
      margin-right: 0.375rem;
    }
  }

  &__close {
    position: relative;
    margin: auto 0.375rem auto 0;
  }

  &--fixed {
    width: 6.0625rem;

    &.-image,
    &.-btnClose {
      width: 7.375rem;
    }

    &.-image.-btnClose {
      width: 8.5625rem;
      justify-content: space-between;
    }

    .fixed-width-image-label-group {
      width: calc(100% - 0.5rem);
      display: flex;
    }

    .a-chip__close {
      margin: unset;
    }
  }

  &__label {
    margin: auto 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .-btnClose & {
      margin-right: 0.375rem;
    }

    .-image & {
      margin-left: 0.5rem;
    }
  }

  &__image {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: auto 0 auto 0.25rem;
    border-radius: 0.75rem;
    background-size: cover;
    background-position: 50% 50%;
  }

  &__icon {
    margin: 0.375rem;
  }
}```