Angular Buttons

Use <mui-button> elements to add MUI-style buttons. Note that all <mui-button> elements trigger a ripple effect when clicked.

Default buttons

button button button button
button button button button 
<div>
  <mui-button>button</mui-button>
  <mui-button color="primary">button</mui-button>
  <mui-button color="danger">button</mui-button>
  <mui-button color="accent">button</mui-button>
</div>
<div>
  <mui-button disabled>button</mui-button>
  <mui-button color="primary" disabled>button</mui-button>
  <mui-button color="danger" disabled>button</mui-button>
  <mui-button color="accent" disabled>button</mui-button>
</div>
View in new tab »

Flat buttons

button button button button
button button button button 
<div>
  <mui-button variant="flat">button</mui-button>
  <mui-button variant="flat" color="primary">button</mui-button>
  <mui-button variant="flat" color="danger">button</mui-button>
  <mui-button variant="flat" color="accent">button</mui-button>
</div>
<div>
  <mui-button variant="flat" disabled>button</mui-button>
  <mui-button variant="flat" color="primary" disabled>button</mui-button>
  <mui-button variant="flat" color="danger" disabled>button</mui-button>
  <mui-button variant="flat" color="accent" disabled>button</mui-button>
</div>
View in new tab »

Raised buttons

button button button button
button button button button 
<div>
  <mui-button variant="raised">button</mui-button>
  <mui-button variant="raised" color="primary">button</mui-button>
  <mui-button variant="raised" color="danger">button</mui-button>
  <mui-button variant="raised" color="accent">button</mui-button>
</div>
<div>
  <mui-button variant="raised" disabled>button</mui-button>
  <mui-button variant="raised" color="primary" disabled>button</mui-button>
  <mui-button variant="raised" color="danger" disabled>button</mui-button>
  <mui-button variant="raised" color="accent" disabled>button</mui-button>
</div>
View in new tab »

Floating action buttons

+ + + +
+ + + + 
<div>
  <mui-button variant="fab">+</mui-button>
  <mui-button variant="fab" color="primary">+</mui-button>
  <mui-button variant="fab" color="danger">+</mui-button>
  <mui-button variant="fab" color="accent">+</mui-button>
</div>
<div>
  <mui-button variant="fab" disabled>+</mui-button>
  <mui-button variant="fab" color="primary" disabled>+</mui-button>
  <mui-button variant="fab" color="danger" disabled>+</mui-button>
  <mui-button variant="fab" color="accent" disabled>+</mui-button>
</div>
View in new tab »

Button sizes

button button button +
button button button +
button button button + 
<div>
  <mui-button size="small" color="primary">button</mui-button>
  <mui-button size="small" color="primary" variant="flat">button</mui-button>
  <mui-button size="small" color="primary" variant="raised">button</mui-button>
  <mui-button size="small" color="primary" variant="fab">+</mui-button>
</div>
<div>
  <mui-button color="primary">button</mui-button>
  <mui-button color="primary" variant="flat">button</mui-button>
  <mui-button color="primary" variant="raised">button</mui-button>
  <mui-button color="primary" variant="fab">+</mui-button>
</div>
<div>
  <mui-button size="large" color="primary">button</mui-button>
  <mui-button size="large" color="primary" variant="flat">button</mui-button>
  <mui-button size="large" color="primary" variant="raised">button</mui-button>
  <mui-button size="large" color="primary" variant="fab">+</mui-button>
</div>
View in new tab »
« Previous Next »