[SalesForce] getting error while saving lightning component

I have created one lightning component to show Account list, but while saving it I am getting error

Failed to save undefined: No COMPONENT named markup://c:button found :
[markup://c:AccountsList]: Source

Lightning component code is as shown below –

<aura:component controller="AccountsController">
   <aura:attribute name="accounts" type="List" />
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   <!-- Use the Apex model and controller to fetch server side data -->
   <table class="slds-table slds-table--bordered slds-table--striped">
      <thead>
        <tr>
           <th scope="col"><span class="slds-truncate">ID</span></th>
           <th scope="col"><span class="slds-truncate">Name</span></th>
           <th scope="col"><span class="slds-truncate">Type</span></th>
           <th scope="col"><span class="slds-truncate">Number Of Employees</span></th>
           <th scope="col"><span class="slds-truncate">Ticker Symbol</span></th>
           <th scope="col"><span class="slds-truncate">Phone</span></th>
           <th scope="col"><span class="slds-truncate">Details</span></th>  
        </tr>
      </thead>
      <tbody>
        <aura:iteration items="{!v.accounts}" var="account">
         <tr>
           <td>{!account.Id}</td>
           <td>{!account.Name}</td>                 
           <td>{!account.Type}</td>
           <td>{!account.NumberOfEmployees}</td>                 
           <td>{!account.TickerSymbol}</td>
           <td>{!account.Phone}</td>
           <td>
              <c:button class="slds-button slds-button--neutral"
                 label="Details"
                 svgXlinkHref="/resource/SLDS090/assets/icons/standard-sprite/svg/symbols.svg#account"
                 svgClass="slds-icon slds-icon-text-default"
                 onclick="{!c.showDetails}"
                 data="{!account.Id}"
              />
           </td>
         </tr>
        </aura:iteration>
      </tbody>
   </table>
</aura:component>

AccountsController code —

public class AccountsController {
    @AuraEnabled
    public static List<Account> getAccounts(){

        return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, BillingStreet, 
                BillingCity, BillingState, BillingPostalCode
                FROM Account ORDER BY createdDate ASC];
    }
}

AccountsListController.js code —

({
   doInit: function(component, event, helper) {      
      //Fetch the expense list from the Apex controller   
      helper.getAccountList(component);
   },
   showDetails: function(component, event, helper) {
        //Get data via "data-data" attribute from button (button itself or icon's parentNode)
        var id = event.target.getAttribute("data-data") || event.target.parentNode.getAttribute("data-data")
        alert(id + " was passed");
   }
})

AccountsListHelper.js code —–

({
   //Fetch the accounts from the Apex controller
  getAccountList: function(component) {
    var action = component.get("c.getAccounts");

    //Set up the callback
    var self = this;
    action.setCallback(this, function(actionResult) {
        component.set("v.accounts", actionResult.getReturnValue());            
    });
    $A.enqueueAction(action);
  }   
})

Please note that my Org is not namespaced.

Best Answer

If you want to use c:button, you need to create this component as well.

Create a lightning component named "button" with the following code

<aura:component >
   <!-- Attributes for the button -->
   <aura:attribute name="label" type="String" description="This is the button label"/>
   <aura:attribute name="class" type="String" description="SLDS class"/>
   <aura:attribute name="onclick" type="Aura.Action" default="{!c.myAction}" description="This allows handling onClick events"/>
   <aura:attribute name="data" type="String" description="Any data to be passed via html5 data- attribute"/>

   <!-- Attributes for SVG -->
   <aura:attribute name="svgXlinkHref" type="String" description="svgIcon's xlink-href"/>
   <aura:attribute name="svgClass" type="String" description="svgIcon CSS classname"/>

   <button class="{!v.class}"  onclick="{!v.onclick}" data-data="{!v.data}"><c:svg xlinkHref="{!v.svgXlinkHref}" class="{!v.svgClass}" />{!v.label}</button>
</aura:component>

for buttonController.js, you can define a default action-

({
    myAction : function(component, event, helper) {

    }
})

You can change the attributes in button component according to your requirement also.