Button
The mdcButton
directive creates a material designed button.
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. |