Use Token

How to Use Token in Lightning component

Lightning Component

Sharing is caring!

Prerequisites : Basic understanding of Lightning Components.

What is the Tokens ? When it useful ?

Tokens are a bundle in lightning same as component,event bundle.  Tokens are using for hold necessary values of our visual design into named tokens. So we can Define the token values once and reuse them throughout our Lightning components CSS resources.

Important !

  • A tokens collection always start with  aura:tokens .
  • It’s can only contains aura:token tags.
  • To make accessible Token bundle in lightning component first tokens bundle always should be named defaultsTokens.
  • Tokens name with defaultTokens are automatically accessible in lightning components.
  • We can not access any other token bundle in our component until we import them into the defaultTokens bundle using extends them.

How to Create Token Bundle ?

For create Token Bundle :

  • Go to the Developer Console–> select File –>  New –> Lightning Tokens.

Use Token

  • Enter a name and description(optionally) for the tokens bundle.
  • Make sure your first tokens bundle should be named defaultTokens

Use Token

We can not edit tokens bundle name or description  in the developer console after create once.

an empty Token bundle created successfully  and looks like :

How to Use Token Bundle In lightning Component ?

A token is comes with name-value pair. that we specify using the aura:token tag. we can define multiple tokens in a tokens bundle, and then we use tokens in our lightning components’ CSS styles resource. we can use only 2 attribute (name , value ) in aura:token tag.

Tokens Example -:

Token [defaultTokens.tokens]

  • Give a relevant name and css value to aura:token tag.

Component [Test.cmp]

CSS [Test.css]

Using tokens in lightning component CSS style Resource -:

  • for using Tokens value in   component CSS  , use token(name)  OR  t(name).

Tokens created in the defaultTokens bundle are automatically available in components in your namespace. To use a design token, reference it using the token(name) function.

TestApp.app

Output -:

Use Token

 

Part 2 : Using Other Tokens in Component. (other than defaultTokens)

Tokens defined in any other bundle won’t be accessible in our components until we import them into the defaultTokens bundle. by extending them

We can use the extends attribute to extend one tokens bundle from another tokens bundle.
and access tokens from one bundle to another, we extend the “child” tokens bundle from the “parent” tokens

  • In Next Example we create 3 Lightning Tokens Bundle , and using them into lightning component CSS style.

  1. defaultTokens.tokens
  2. TokenForColors.tokens
  3. TokenForAlignment.tokens

Token [defaultTokens.tokens]

Token [TokenForColors.tokens]

Token [TokenForAlignment.tokens]

Component [Test.cmp]

CSS [Test.css]

Using tokens in lightning component CSS style Resource -:

  • for using Tokens value in   component CSS  , use token(name)  OR  t(name).

TestApp.app

Output -:

Use Token

Some useful resources links related to Tokens :-

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. 🙂

 

Sharing is caring!

(Visited 1,968 times, 1 visits today)

Leave a Reply