Button

Short Description:

The button can be used by the editor on its own or integrated into other components to direct the user to further links. Different styles change the look of the button.

Marketing Purpose:

The button should draw attention to a link using different styles.

Styles

  1. Blue
  2. Green
  3. Red
  4. Gray
  5. Search Small
  6. Search
  7. Approved
  8. Delete
  9. Stop
  10. Arrow
  11. Blue Small
  12. Green Small
  13. Red Small
  14. Gray Small
  15. Green Outline Small
  16. Blue Outline Small
  17. Red Outline Small

Important. The icon is not editable, but you need to add some text in the "Icon" field to activate it. We have put as defatult text: "icon-placeholder-do-not-change" but you can use any other text.

Warning
Icon field

Example

Blue Button 
    
    

    
  1. 
        jcr:title:
        Blue Button
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkURL:
        /content/aida-component-library/backlog/page-authoring/button
    
    4. 

    
  4. 
        linkTarget:
        _self
    
    5. 

    
  5. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    6. 



    
        

    


    
    

    Blue Button




    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Green Button
    
    2. 

    
  2. 
        linkTarget:
        _self
    
    3. 

    
  3. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    4. 

    
  4. 
        cq:styleIds:
        1661152721579
    
    5. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Red Button
    
    2. 

    
  2. 
        linkTarget:
        _self
    
    3. 

    
  3. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    4. 

    
  4. 
        cq:styleIds:
        1661152819990
    
    5. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Gray Button
    
    2. 

    
  2. 
        linkTarget:
        _self
    
    3. 

    
  3. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    4. 

    
  4. 
        cq:styleIds:
        1661152941645
    
    5. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Search Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661152947730
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Search
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1660900532184
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Approved
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661152958236
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Delete
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661152963397
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Stop
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661152967992
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Arrow
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661152972206
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Blue Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153044520
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Green Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153051614
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Red Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153062318
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Gray Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153066845
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Blue Outline Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153084907
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Green Outline Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153071968
    
    6. 



    
        

    





    

    


    JSON


    
    

    
  1. 
        jcr:title:
        Red Outline Small
    
    2. 

    
  2. 
        icon:
        icon-placeholder-do-not-change
    
    3. 

    
  3. 
        linkTarget:
        _self
    
    4. 

    
  4. 
        sling:resourceType:
        aida-component-library/core/components/content/button
    
    5. 

    
  5. 
        cq:styleIds:
        1661153094109
    
    6. 



    
        

    





    

    


    JSON

Built with Core Components 2.27.0.