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** ⚠️