Button

Usage

Simplest use case: a button with text in it, telling the user what to do.

<EsButton @label="click me" />

Also supported- block use:

<EsButton>
  click me <span>🐹</span>
</EsButton>

To add interactivity you can pass an action to onClicked

<EsButton @onClicked={{this.incrementValue}}>
  Increment Value
</EsButton>

{{this.value}}

Secondary Buttons

<EsButton @label="click me" @secondary={{true}} />

Styling Links

It is also possible to style a link to look like a button using the es-button or es-button-secondary class.

Go to Ember homepage Go to the Guides

<a href="https://emberjs.com" class="es-button">Go to Ember homepage</a>
<a href="https://guides.emberjs.com" class="es-button-secondary">Go to the Guides</a>

Accessibility

Since we're using the native HTML button element and requiring a label value to be provided, the component itself is accesible as it is.

If you are going to put an icon in the button, then you will need to set an aria-label property on the button:

<EsButton aria-label="Hamster Secrets" title="Hamster Secrets">
  🐹
</EsButton>