Component
A tier of token meant to describe a specific interface concept. The naming of this token will consider a single user interface pattern, and then name according to that pattern.
The responsibility of these tokens is typically matched to the component owner to which the token is assigned. The value assigned to these tokens can be permanent or reference another token as an alias.
Example
Section titled “Example”checkbox.checked.bgColor = color.blue.500
modal.bgColor = surface.elevated.bgColor
These tokens are helpful for the following reasons:
- These tokens support changes meant to affect very specific parts of the interface, as opposed to more generic concepts that a semantic token would handle.
Warning
Exposing component tokens may allow for parts of the experience to look inconsistent. For example, providing access to a checkbox border separately from a radio button border allows for these values to be decided differently and therefore presented differently.