Component tokens

Component tokens are the third and most granular tier of a design tokens architecture: values scoped to a single component, like button-bg-hover or input-border-focus. They reference semantic tokens, which in turn reference reference tokens, forming a clean alias chain from raw value to component property.

Component tokens are how a system supports custom variants without breaking the shared semantic layer — a marketing button can override button-bg-default to a campaign colour without polluting the global color-action-primary token. Material 3 was the first major system to formalise the tier; most teams now follow the same pattern.

Related: Design tokens · Reference tokens · Semantic tokens · Component