Swegon Component Library

Chips 

<button type="button" class="chips ">
    <span class="chips__text">
        Tag item label
    </span>
    <span class="chips__icon">
        <svg class="icon " focusable="false">
            <use xlink:href="#icon-plus"></use>
        </svg>
    </span>
</button>
 
<button type="button" class="chips {{ additionalClasses }}">
    <span class="chips__text">
        {{ label }}
    </span>
    <span class="chips__icon">
        {{> @icon id=linkIcon }}
    </span>
</button>
 
{
  "label": "Tag item label",
  "linkIcon": "plus"
}
  • Content: 
    .chips {
    position: relative;
    margin: 0;
    font-size: size(1.5);
    line-height: size(2);
    background: $color-green-dark;
    color: $color-white;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    cursor: pointer;

    &__text {
        position: relative;
    }
}

.chips__icon {
    margin-left: 6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
        transform: rotate(45deg);
        width: 14px;
        height: 14px;
        fill: $color-white;
    }
}
  • URL: /components/raw/chips/chips.scss
  • Filesystem Path: src/components/chips/chips.scss
  • Size: 594 Bytes

No notes defined.