Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Using the Salesforce Lightning Design System in Apps
Using External CSS
More Readable Styling Markup with the join Expression
Tips for CSS in Components
CSS for RTL Languages
Vendor Prefixes
Styling with Design Tokens
Tokens Bundles
Create a Tokens Bundle
Defining and Using Tokens
Using Expressions in Tokens
Extending Tokens Bundles
Using Standard Design Tokens
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Defining and Using Tokens

A token is a name-value pair that you specify using the <aura:token> component. Define tokens in a tokens bundle, and then use tokens in your components’ CSS styles resources.

Defining Tokens

Add new tokens as child components of the bundle’s <aura:tokens> component. For example:

The only allowed attributes for the <aura:token> tag are name and value.

Using Tokens

Tokens created in the defaultTokens bundle are automatically available in components in your namespace. To use a design token, reference it using the token() function and the token name in the CSS resource of a component bundle. For example:

If you prefer a more concise function name for referencing tokens, you can use the t() function instead of token(). The two are equivalent. If your token names follow a naming convention or are sufficiently descriptive, the use of the more terse function name won’t affect the clarity of your CSS styles.