Fork me on GitHub

Button Item

Enables the creation of buttons with icons and event handling.


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the Button Item module.

AUI().use(
  'aui-button-item',
  function(A) {
    // code goes here
  }
);

Using Button Item

Create an HTML element to house your button(s).

<div id="button"></div>

Now use the Button Item component to dynamically create buttons with included icons. After icon pass in the specific icon you want displayed inside of the button, and for render pass in your HTML element.

AUI().use(
  'aui-button-item',
  function(A) {
    new A.ButtonItem(
      {
        icon: 'calendar',
        render: '#button'
      }
    );
  }
);

Configuring Button Item

Button Item can be configured to include not only icons, but custom label and title.

AUI().use(
  'aui-button-item',
  function(A) {
    new A.ButtonItem(
      {
        icon: 'calendar',
        label: 'Calendar',
        render: '#button',
        title: 'This is the button title'
      }
    );
  }
);

The Button Item component can also do event handling, allowing the user to determine what happens when the button is clicked.

AUI().use(
  'aui-button-item',
  function(A) {
    new A.ButtonItem(
      {
        handler: function() {
          alert('Here is an alert, triggered by an aui button item!');
        },
        icon: 'info',
        render: '#button'
      }
    );
  }
);
For more information about configuration, check out our API Docs.