Components chevron_right Button

GitHub
href link

Template

<div class="layout-row">
  <PaperButton @onClick={{action "flatButton"}}>Button with action</PaperButton>
  <PaperButton @noink={{true}} @primary={{true}}>Primary (noink)</PaperButton>
  <PaperButton @disabled={{true}}>disabled</PaperButton>
  <PaperButton @warn={{true}}>warn</PaperButton>
  <PaperButton @accent={{true}}>accent</PaperButton>
  <PaperButton @href="http://emberjs.com/images/tomsters/original.png" @target="_blank">href link</PaperButton>
</div>
<p>
  <PaperButton @raised={{true}} @onClick={{action "raisedButton"}}>Button with action</PaperButton>
  <PaperButton @raised={{true}} @primary={{true}}>Primary</PaperButton>
  <PaperButton @raised={{true}} @disabled={{true}}>disabled</PaperButton>
  <PaperButton @raised={{true}} @warn={{true}}>warn</PaperButton>
  <PaperButton @raised={{true}} @accent={{true}}>accent</PaperButton>
</p>
<CustomButton>
  <p>
    <PaperButton @raised={{true}} @onClick={{action "targetButton"}}>Button with target</PaperButton>
    <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "targetButton"}}>Button with bubble</PaperButton>
    <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "targetButton"}} @bubbles={{false}}>Button no bubble</PaperButton>
  </p>
</CustomButton>

<p>
  <PaperButton @raised={{true}} @fab={{true}}>Fab</PaperButton>
  <PaperButton @raised={{true}} @fab={{true}} @accent={{true}}>Fab</PaperButton>
  <PaperButton @raised={{true}} @mini={{true}}>Mini</PaperButton>
  <PaperButton @raised={{true}} @mini={{true}} @primary={{true}}>Mini</PaperButton>
  <PaperButton @iconButton={{true}}>{{paper-icon "accessibility"}}</PaperButton>
</p>

<p>
  <PaperButton @raised={{true}} @label="Blockless version" />
</p>

Controller

// app/components/custom-button.js
import Component from '@ember/component';

export default Component.extend({
  actions: {
    targetButton() {
      alert('You pressed a target button. -from component');
    }
  }
});

Usage

Option Type Description
bubbles boolean Determines whether the Ember click event handler bubbles. Default is undefined, which bubbles.
disabled boolean Whether the button is displayed as disabled and does not accept clicks.
onClick closure Action sent when the button is clicked.
type string Sets the html5 type attribute. Defaults to "button", except for link buttons.
Link buttons
href string Displays the button as an link to the specified destination URL.
target string Sets the link target attribute, such as "_blank".
Appearance
fab boolean Display as a Floating Action Button.
iconButton boolean Set when the contents contains an icon and adjusts CSS appropriately.
label string Set the content of the button when used as a blockless component.
mini boolean Display as a mini-sized button. Implies fab, unless fab is explicity set falsy.
noInk boolean Suppresses the ripple effect when clicked.
primary boolean Display as the primary button, more prominent that other buttons.
raised boolean Display button with a 3-D effect.
Theme colors
accent boolean Displays the button in the theme's Accent color.
warn boolean Displays the button in the theme's warn color.