There are 7 color schemes for buttons.
Open the developer console to view button events.
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.)
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.
<ma-button type='primary' href='https://google.com'> <fa name='google'></fa> Google </ma-button>
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.
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.
Buttons can be outlines instead of solid colors.
Set the [outline]
property to true
to render a button with outlines.
<ma-button type='primary' [outline]='true' (click)='showClickAlert($event)'> Primary </ma-button>
Buttons come in 3 sizes.
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>
A button can be a 100% width block element.
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>
Buttons can be grouped together.
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>
A button can have rounded corners.
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.
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.
<ma-button [disabled]='{{disabledDemo}}'> Disable Demo </ma-button> <ma-button [busy]='{{busyDemo}}'> Disable Demo </ma-button>