UIButton - adarshpastakia/aurelia-ui-framework GitHub Wiki

Usage
  • Simple button
    <ui-button theme size style glyph="ui-icon-edit" click.trigger="fn($event)">
  Button</ui-button>
    • Themes
      • light
      • dark
      • primary
      • secondary
      • info
      • danger
      • success
      • warning
    • Sizes
      • normal
      • big
      • small
    • Styles
      • round : Round sides
      • square : Equal padding all sides
      • icon-top : Place icon above label
    • Bindable Attributes
      • theme : Use theme.bind when button theme needs to be updated after attached
      • label : Use label.bind when button label needs to be updated after attached
      • value : Used for button group toggle
      • width
      • disabled
      • busy : show busy indicator
  • Button with dropdown
    <ui-button glyph="ui-icon-picture" dropdown.bind="btnMenu">Click Me</ui-button>
<ui-menu ref="btnMenu">
  <ui-menu-section>Actions</ui-menu-section>
  <ui-menu-item glyph="ui-icon-edit">Edit</ui-menu-item>
  <ui-menu-item glyph="ui-icon-trash">Delete</ui-menu-item>
  <ui-menu-section>Options</ui-menu-section>
  <ui-menu-item glyph="ui-icon-cog">Settings</ui-menu-item>
</ui-menu>
  • Button with dropdown form
    <ui-button glyph="ui-icon-key" form.bind="btnForm">Login</ui-button>
<ui-form ref="btnForm" class="ui-pad-all">
  <ui-loader busy.bind="isSaving"></ui-loader>
  <ui-input-group>
    <ui-input-label>Username</ui-input-label>
    <ui-input width="12em"></ui-input>
  </ui-input-group>
  <ui-input-group>
    <ui-input-label>Password</ui-input-label>
    <ui-input password></ui-input>
  </ui-input-group>
  <div class="ui-text-end">
    <ui-button dark>Login</ui-button>
  </div>
</ui-form>
⚠️ **GitHub.com Fallback** ⚠️