vcl-token

A selectable item from a list of possible items.

Usage no npm install needed!

<script type="module">
  import vclToken from 'https://cdn.skypack.dev/vcl-token';
</script>

README

VCL token

A selectable item from a list of possible items.

Features

  • Optional button to remove the token.
  • Support for selected and highlighted states.
  • A container to get a gaps relative to container's border right.

Usage

basic example

A button may be embedded to offer a control to remove the token.

button example

A selected and highlighted state is supported.

states example

Classes

  • vclToken
  • vclTokenContainer: Container for tokens to get proper paddings.
  • vclTokenLabel

Modifiers

  • vclSelected
  • vclHighlighted

Variables

  • --token-bg-color
  • --token-border-color
  • --token-border-hover-color
  • --token-border-selected-color
  • --token-bg-selected-color
  • --token-selected-color
  • --token-border-highlighted-color
  • --token-bg-highlighted-color
  • --token-highlighted-color
  • --token-color

Demo

example.html on GH-pages.