Example
<wui-chip>chip</wui-chip>Usage
Chips serve a wide range of purposes within our platform. Depending on the context, they are referred to by different names, such as labels, tags, filter chips, or similar terms. However, regardless of the specific name or context, the underlying component that powers them is always the wui-chip.
Variants
Labels
Status colors
Further colors
<p><b>Status colors</b></p>
<wui-chip variant="success">label success</wui-chip>
<wui-chip variant="warning">label warning</wui-chip>
<wui-chip variant="danger">label danger</wui-chip>
<p class="m-t-20"><b>Further colors</b></p>
<wui-chip variant="active">label active</wui-chip>
<wui-chip variant="highlight">label highlight</wui-chip>
<wui-chip variant="inactive">label inactive</wui-chip>
<wui-chip variant="papaya">label papaya</wui-chip>
<wui-chip variant="plum">label plum</wui-chip>
<wui-chip variant="yangmei">label yangmei</wui-chip>
<wui-chip variant="apple">label apple</wui-chip>
Inverted label
Labels are meant to attract the user's attention in general. However, if they end up drawing too much focus and potentially distracting from the actual content, we utilize the inverted property. This is particularly relevant when, for example, there are multiple labels listed side by side.
Status colors
Further colors
<p><b>Status colors</b></p>
<wui-chip variant="success" inverted>label success</wui-chip>
<wui-chip variant="warning" inverted>label warning</wui-chip>
<wui-chip variant="danger" inverted>label danger</wui-chip>
<p class="m-t-20"><b>Further colors</b></p>
<wui-chip variant="active" inverted>label active</wui-chip>
<wui-chip variant="highlight" inverted>label highlight</wui-chip>
<wui-chip variant="inactive" inverted>label inactive</wui-chip>
<wui-chip variant="papaya" inverted>label papaya</wui-chip>
<wui-chip variant="plum" inverted>label plum</wui-chip>
<wui-chip variant="yangmei" inverted>label yangmei</wui-chip>
<wui-chip variant="apple" inverted>label apple</wui-chip>
Tags
A tag is a chip component with an additional () to the right of the chip text. By clicking on the (), the user can remove the tag from the corresponding context. This approach can be found, for instance, in a Tag-Input or in our WUIForm-multiselect. Since a large number of tags can be displayed side by side, we generally employ the inverted variant. This ensures that the user's focus is not overly directed towards this particular component.
<wui-chip variant="active" inverted removable>tag</wui-chip>Filters
Filters is a composite component that filters the items of a list or table. Just like a tag a filter consists of the text part and the delete button. Additionally to the normal text there is the filter option which is indicated in bold text.
<wui-chip variant="active" removable><strong>Country:</strong> Germany, Poland</wui-chip>Selectable
Selectable chips can be selceted and deselected by clicking in and outside the chip. The selection status is indicated by a change in color to a darker tone.
<wui-chip variant="active" selectable>label active</wui-chip>
<wui-chip variant="highlight" selectable>label highlight</wui-chip>
<wui-chip variant="success" selectable>label success</wui-chip>
<wui-chip variant="warning" selectable>label warning</wui-chip>
<wui-chip variant="danger" selectable>label danger</wui-chip>
<wui-chip variant="inactive" selectable>label inactive</wui-chip>
<wui-chip variant="papaya" selectable>label papaya</wui-chip>WUI decisions 
- Alignment. Chips are always vertically centered with adjacent texts, buttons, etc.
Description
Responsive chips (aka tags) make it easier to categorize content and browse ie. through different articles from the same category.
WUI tags and chips categorize content with the use of text and icons. Tags and chips make it easier to browse throughout articles, comments or pages. Their main goal is to provide your visitors with an intuitive way of getting what they want.
Examples
Chips can be used to represent small blocks of information. They are most commonly used either for filter options or for tags.
<template>
<div>
<!-- Label -->
<div class="display--inline-block m-r-10">
<wui-chip>Label</wui-chip>
</div>
<!-- Tag -->
<div class="display--inline-block m-r-10">
<wui-chip type="tag" removable>Tag</wui-chip>
</div>
<!-- Filter -->
<div class="display--inline-block m-r-10">
<wui-chip type="filter" removable
><strong>Filter:</strong> Item 1, Item 2</wui-chip
>
</div>
<!-- Chip with 'papaya' color theme and inverted -->
<div class="display--inline-block m-r-10">
<wui-chip variant="papaya" inverted>inverted</wui-chip>
</div>
<!-- Selectable chip -->
<div class="display--inline-block">
<wui-chip variant="plum" selectable>selectable</wui-chip>
</div>
</div>
</template>
<!-- wui-chip-examples.vue -->
Component reference
<wui-chip>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
disabled | Boolean | false | When set to true, disables the component's functionality and places it in a disabled state |
focused | Boolean | false | When set to true, places the component in a focused state |
id | String | Used to set the id attribute on the rendered content, and used as the base to generate any additional element IDs as needed | |
inverted | Boolean | null | Renders the chip in a light version (inverted colors) |
removable | Boolean | false | When set to true, a clear 'x' icon will be rendered next to the chip content |
removeAriaLabel | String | 'Delete' | A custom text for the aria-label HTML attribute of the clear icon |
selectable | Boolean | false | When set to true, the component will be put into a selected state when clicked. It will deselect itself once the user clicks outside of the chip |
size | String | 'md' | Set the size of the component's appearance. 'sm', 'md' (default), or 'lg' |
square | Boolean | false | deprecated - use type="icon" instead - Render a square label (useful for icon chips and inverted style) |
type | String | "label" | Choose the type which should be rendered (available types are label, tag, filter, icon, price) |
variant | String | Applies one of the WUI theme state or color variants to the component |
Slots
| Name | Description |
|---|---|
default | Content to place in the chip |
icon | Can be used to implement a custom icon or other content for the clear action |
Events
| Event | Arguments | Description |
|---|---|---|
click | Native click event object | Emitted when the chip is clicked |
focus | focused - Boolean - The focused state, true or false | Emitted when the component's focus state has changed |
remove | Native click or keydown.enter event object | Emitted when the clear action icon was clicked |
Importing individual components
You can import individual components into your project via the following named exports:
| Component | Named Export |
|---|---|
<wui-chip> | WuiChip |
Example
import { WuiChip } from "@wui/wui-vue/lib/chip";
Vue.component("wui-chip", WuiChip);
Importing as a Vue.js plugin
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
| Named Export | Import Path |
|---|---|
ChipPlugin | @wui/wui-vue/lib/chip |
Example
import { ChipPlugin } from "@wui/wui-vue/lib/chip";
Vue.use(ChipPlugin);
