0

I am trying to create a simple calculator : below are the codes : When i am adding it to my lightning page i am getting the Error:

HTML:

<template>
 <lightning-card title="Simple Calculator" icon-name="Standard:formula">
   <lightning-layout multiple-rows>

     <lightning-layout-item size="12" padding="around-medium">
       <lightning-input type="number" name="firstNumber"></lightning-input>
    </lightning-layout-item>

   <lightning-layout-item size="12" padding="around-medium">
    <lightning-input type="number" name="secondNumber"></lightning-input>
   </lightning-layout-item>

   <lightning-layout-item padding="around-medium">
   <lightning-button-group>
       <lightning-button label="Add" icon-name="Utility:add" icon-position="right"></lightning-button>
       <lightning-button label="Substract" icon-name="Utility:dash" icon-position="right"></lightning-button>
       <lightning-button label="Multiply" icon-name="Utility:close" icon-position="right"></lightning-button>
       <lightning-button label="Divide"  icon-name="Utility:magicwand" icon-position="right"></lightning-button>
   </lightning-button-group>
   </lightning-layout-item>


   <lightning-layout-item size="12" padding="around-medium">
       <lightning-formatted-text></lightning-formatted-text>
   </lightning-layout-item>

   </lightning-layout>
 </lightning-card>
</template>

Meta File:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <description>Simple Calculator App build With LWC</description>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Error:

Unknown token: 'undefined'. Are you missing a tokens file or declaration?
4

The issue is with the icon-name="Standard:formula". S needs to be small not CAPS, similarly for Utility u needs to be small. This is will resolve the issue.

| improve this answer | |
0

It's because the label attribute is required when using a lightning-input element. To hide the babel, add variant="label-hidden" to your lightning elements. Here is a playground link for you. Also use utility instead of Utility in your icon-name attributes

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.