Colors

There are 7 color schemes for buttons.

Open the developer console to view button events.

Primary Secondary Link Success Info Warning Danger

Example markup:

<ma-button
  type='primary'
  (click)='showClickAlert($event)'>
    Primary
</ma-button>

Set the type to primary, secondary, link, success, info, warning, or danger. The click emitter fires when the button is clicked.

Modular Admin fires a special Click event that contains a reference to an underlying MouseEvent and a reference to the Button.

void showClickAlert(ButtonClick click) {
  var target = (click.event
    .currentTarget) as Element;
  var text = target.text.trim()
  window.console.log(
    'You clicked on $text.'
  );
  click.button.busy = true;
  new Timer(
    new Duration(seconds:1),
    () => click.button.busy = false
  );
}

The event handler attached to all of the buttons on this page prints the button's text to the console and sets the button's busy state for 1 second. (Read more about busy/disabled states below.)

Links

Buttons may be used as links.

As a convenience, you may set the [href] property of any button to trigger navigation to a URL. Keep in mind that it still behaves like a button, not an anchor, e.g. the target URL doesn't appear in the status bar when you hover over it, etc.

Google

<ma-button
  type='primary'
  href='https://google.com'>
    <fa name='google'></fa>
    Google
</ma-button>

Links

A link may be styled to resemble a button.

Link buttons are useful when placing real buttons and links on the same line. A link button will be sized correctly and will look a bit like a button.

Button Link

Example markup:

<ma-button
  type='primary'
  (click)='showClickAlert($event)'>
    Primary
</ma-button>

Set the type to primary, secondary, success, info, warning, or danger. The click emitter fires when the button is clicked.

Outlines

Buttons can be outlines instead of solid colors.

Primary Secondary Success Info Warning Danger

Set the [outline] property to true to render a button with outlines.

<ma-button
  type='primary'
  [outline]='true'
  (click)='showClickAlert($event)'>
    Primary
</ma-button>

Sizes

Buttons come in 3 sizes.

Small Medium Large

Set the size property to small, medium, or large. The default is medium.

<ma-button
  type='primary'
  size='small'
  (click)='showClickAlert($event)'>
    Small
</ma-button>

Blocks

A button can be a 100% width block element.

Block

Set the [block] property to true to render a button as a block element.

<ma-button
  type='success'
  [block]='true'
  (click)='showClickAlert($event)'>
     Block
</ma-button>

Groups

Buttons can be grouped together.

Left Middle Right Left Middle Right

Wrap two or more <ma-button> elements with a <ma-button-group> to render them as a group.

<ma-button-group>
  <ma-button
    type='info'
    (click)='showClickAlert($event)'>
      Left
  </ma-button>
  <ma-button
    type='info'
    (click)='showClickAlert($event)'>
      Middle
  </ma-button>
  <ma-button
    type='info'
    (click)='showClickAlert($event)'>
      Right
  </ma-button>
</ma-button-group>

Shapes

A button can have rounded corners.

Pill Left Pill Right Pill Both

Set the pill property to left, right, or both.

<ma-button
  type='warning'
  pill='left'
  (click)='showClickAlert($event)'>
    Pill Left
</ma-button>

Pills work nicely with button groups.

Left Middle Right

States

Display disabled or busy buttons.

A button's disabled or busy state may be manipulated inside an event handler (as seen in the first card on this page) or may be set via component attributes.

Disable Demo

Busy Demo

<ma-button [disabled]='{{disabledDemo}}'>
  Disable Demo
</ma-button>
<ma-button [busy]='{{busyDemo}}'>
  Disable Demo
</ma-button>