{{slds-avatar}} {{#slds-avatar}} <img src="/assets/images/avatar1.jpg" alt="default avatar" /> {{/slds-avatar}} {{#slds-avatar}} <img src="/assets/images/avatar1.jpg" alt="default avatar" /> {{/slds-avatar}} {{#slds-avatar type='circle'}} <img src="/assets/images/avatar1.jpg" alt="default avatar" /> {{/slds-avatar}} {{#slds-avatar size='large'}} <img src="/assets/images/avatar1.jpg" alt="default avatar" /> {{/slds-avatar}} {{slds-avatar name='Bobby Jenkins'}} {{slds-avatar name='Terrorcorp'}} {{slds-avatar name='Apache Helicopter' sprite='action' icon='announcement'}}

{{slds-badge text='badger'}} {{#slds-badge}} Badger badger {{/slds-badge}}

{{slds-button text='click me'}} {{#slds-button clicked=(action 'doYourThing')}} Click Me {{/slds-button}} {{slds-button text='click me' type='brand'}} {{slds-button text='click me' type='brand' icon='user'}} {{slds-button text='click me' type='brand' icon='down' iconPosition='right'}}

{{#slds-button-group as |group|}} {{group.button text='Option1' clicked=(action 'buttonClicked' 'option1')}} {{group.button text='Option2' clicked=(action 'buttonClicked' 'option2')}} {{group.button text='Option3' disabled=true clicked=(action 'buttonClicked' 'option3')}} {{/slds-button-group}} {{#slds-button-group as |group|}} {{group.button text='Option1' clicked=(action 'buttonClicked' 'option1')}} {{group.button text='Option2' clicked=(action 'buttonClicked' 'option2')}} {{group.button text='Option3' disabled=true clicked=(action 'buttonClicked' 'option3')}} {{#group.menu as |menu|}} {{menu.item text="Overflow 1" clicked=(action 'buttonClicked' 'overflow1')}} {{menu.item text="Overflow 3" clicked=(action 'buttonClicked' 'overflow3')}} {{menu.item text="Overflow 2" clicked=(action 'buttonClicked' 'overflow2')}} {{/group.menu}} {{/slds-button-group}}

{{slds-button-icon}} {{slds-button-icon icon='user'}} {{slds-button-icon icon='user' type='error'}} {{slds-button-icon icon='warning' type='error'}} {{slds-button-icon icon='warning' type='error' disabled=true}} {{slds-button-icon icon='warning' type='error' size='large'}} {{slds-button-icon icon='like' border='outline' clicked=(action 'liked')}}

{{#slds-menu isOpen=true as |dropdown|}} {{dropdown.header text="Heading"}} {{dropdown.item text='Menu Item 1' clicked=(action 'itemSelected' 'item1')}} {{dropdown.item text='Menu Item 2' clicked=(action 'itemSelected' 'item1')}} {{dropdown.item text='Menu Item 3' clicked=(action 'itemSelected' 'item1')}} {{dropdown.separator}} {{#dropdown.item clicked=(action 'itemSelected' 'item1')}} Menu Item 4 {{/dropdown.item}} {{/slds-menu}}

{{slds-spinner}} {{slds-spinner size='large'}} {{slds-spinner color='brand'}} <div class="slds-spinner_container"> {{slds-spinner}} </div>