Chip

Sticker Sheet Storybook

Example

<vega-chip text="Chip" clickable="true" show-close-icon="true"></vega-chip>

const chip = document.querySelector("vega-chip")

chip.addEventListener("vegaClick", (e) => { console.log(e.currentTarget.value)
}) 
chip.addEventListener("vegaClose", (e) => {
e.currentTarget.remove() })

Example with Border and Responsive Size

<vega-chip text="Chip" variant="outlined"></vega-chip>


    document.querySelector('vega-chip').size = {
        default: 'extra-small',
        S: 'small',
        M: 'default',
        L: 'large',
    };

Status Example


<vega-chip text="Chip" chip-type="status" status-color="bg-status-success"></vega-chip>

Usage

Chips are small compact elements which are designed to represent attributes, actions, or inputs made by a user.

They are commonly used in search interfaces to indicate keywords that a user has input, or various selections made in a filter. There are several types of chips: Input chips, choice chips, filter chips, and action chips.

Chips have several different sizes. In most cases you would want to use the default or small size for desktop and extra small size for mobile devices. The large size is meant to be used in marketing pages to highlight an important feature.

Types of Chips

  • Input chips
  • Choice chips
  • Filter chips
  • Action chips

Properties

Name Description Default
text The text of vega-chip. Required -
clickable A Boolean indicating if the chip is clickable. while if true, vega-chip will emit a vega-click event when the content is clicked. boolean false
variant The component contains two variants: filled-background outlined filled-background
size The component has four possible sizes: extra-small, small, default, large, You can set this property as a responsive type ResponsiveType default
chip-type The component contains two chip types: status and label, where status means vega-chip displays a dot as prefix. In this case the icon and iconAlign properties will not work. label means you can set an icon as prefix or suffix. label
bg-color The background color of vega-chip. It will only work using the filled-background variant. `Optional bg-secondary
text-color The text color of vega-chip Optional bg-status-info
status-color The status dot color. It will only work with the status chipType. Optional -
show-close-icon Indicates if the chip is clickable. If set to true, it will emit the vegaClose event while clicking the close icon. boolean false
icon You may choose an icon. The position is set using the iconAlign property. string
icon-align Icon placement - left or right. left

All Parameters

<vega-chip
    text='string text'
    clickable='true | false'
    variant='filled-background | outlined'
    size='extra-small | small | default | large'
    chip-type='status | label'
    bg-color='any backgroundd color token'
    text-color='any text color token'
    status-color='any background color token'
    show-close-icon='true | false'
    icon='any icon token'
    icon-align='left | right'
></vega-chip>

Event

If clickable is set to true, it will trigger a vegaClick event.

If show-close-icon is set to true, clicking on it will trigger a vegaClose event.

<!-- Javascript -->
document.querySelector("vega-chip").addEventListener("vegaClick", (e) => { console.log(e.currentTarget.value)
}) document.querySelector("vega-chip").addEventListener("vegaClose", (e) => {
console.log(e.currentTarget.value) })

For more details, view in Storybook

Accessibility

  • Elements must have sufficient color contrast
  • id attribute value must be unique

Best Practices

Chips are good ways of allowing user interaction into search results. However, when used as filter tools, chips should not be used as a default state. Default states in an application should exist with no filters. Filter chips should only be used as a result of direct user input into an application. When applied, display chips clearly in the interface, so that users can easily identify what filters have been used.

Allow users to select multiple filter options; the application should allow users to have more than one chip for each filter to help them narrow their search results.