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
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
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('https://brandguide-cdn.azureedge.net/frontend-kit/chip-avatar.jpg')"
></div>
<span id="chip-label-id-image" class="a-chip__label">Label</span>
</div>
close button
<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
<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('https://brandguide-cdn.azureedge.net/frontend-kit/chip-avatar.jpg')"
></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
<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
<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
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
<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('https://brandguide-cdn.azureedge.net/frontend-kit/chip-avatar.jpg')"
></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
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
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
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
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
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;
}
}```