# [VCL](https://vcl.github.io/vcl/) token

An atomic input element that can be interacted upon.

## Features

- Optional button to interact with the token, e. g. to remove it.
- Support for selected and highlighted states.
- A token container to get gaps relative to container's border right.

## Usage

[basic example](/demo/example-basic.html)

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

[button example](/demo/example-button.html)

A selected and highlighted state is supported.

[states example](/demo/example-states.html)

## Classes

- `token`
- `token-container`: Container for tokens to get proper paddings.
- `token-label`

## Modifiers

- `selected`
- `highlighted`

## 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`