MDC Pug3.0.0-beta.3
codeforumbug_report

Button

Buttons communicate an action a user can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.

Examples

Text Button

codecode_off
+mdc-button('Button')
+mdc-button('Button')(outlined)
+mdc-button('Button')(unelevated)
+mdc-button('Button')(raised)
 
// or
// +mdc-button(label='Button')
// +mdc-button(label='Button' outlined)
// +mdc-button(label='Button' unelevated)
// +mdc-button(label='Button' raised)

Buttons with an icon

codecode_off
+mdc-button('Button')(icon='star')
+mdc-button('Button')(icon='star' outlined)
+mdc-button('Button')(icon='star' unelevated)
+mdc-button('Button')(icon='star' raised)
 
// or
// +mdc-button('Button')(leadingIcon='star')
// +mdc-button('Button')(leadingIcon='star' outlined)
// +mdc-button('Button')(leadingIcon='star' unelevated)
// +mdc-button('Button')(leadingIcon='star' raised)

Buttons with a trailing icon

codecode_off
+mdc-button('Button')(trailingIcon='star')
+mdc-button('Button')(trailingIcon='star' outlined)
+mdc-button('Button')(trailingIcon='star' unelevated)
+mdc-button('Button')(trailingIcon='star' raised)

Buttons with leading and trailing icons

codecode_off
+mdc-button('Button')(
    leadingIcon='star'
    trailingIcon='star'
)
+mdc-button('Button')(
    leadingIcon='star'
    trailingIcon='star'
    outlined
)
+mdc-button('Button')(
    leadingIcon='star'
    trailingIcon='star'
    unelevated
)
+mdc-button('Button')(
    leadingIcon='star',
    trailingIcon='star'
    raised
)