VCL token

A atomic input element that can be interacted upon.

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.