Blox Material v1.0.0-beta.3

Button

The mdcButton directive creates a material designed button.

Buttons & Anchors

Buttons:

Anchors:

Default
Icon
Icon After

API

Directive: MdcButtonIconDirective

Selector: [mdcButtonIcon]

Use this directive for adding an icon to an mdcButton. This directive can be added to font-style icons (such as material icons from Google fonts), or with svg elements for svg based icons.

Directive: MdcButtonLabelDirective

Selector: [mdcButtonLabel]

Directive for the label of an mdcButton. Must be a direct child of mdcButton.

Directive: MdcButtonDirective

Selector: button[mdcButton] a[mdcButton]

Material design button. Anchors can also be styled as buttons with this directive. Defaults to a button that is flushed with the surface. Use the input modifiers to alter the styling, or create your own style based on the provided sass-mixins.

For buttons with a trailing icon, you must put the label inside an mdcButtonLabel directive. For all other buttons it is also recommnded to put the label inside an mdcButtonLabel, because future version of material-components-web may make it's use mandatory.

A ripple (and the required DOM elements for the ripple) will be added automatically.

Property Description
@Input()
raised
boolean

When this input is defined and does not have value false, the button will be elevated upon the surface.

@Input()
outlined
boolean

When this input is defined and does not have value false, the button will be styled flush with the surface and have a visible border.

@Input()
unelevated
boolean

Set this property to a non false value for a contained button flush with the surface.