Buttons

Default buttons

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

Flat buttons

Button Button Button Button
Button Button Button Button
<div>
  <mui-btn style="flat">Button</mui-btn>
  <mui-btn style="flat" color="primary">Button</mui-btn>
  <mui-btn style="flat" color="danger">Button</mui-btn>
  <mui-btn style="flat" color="accent">Button</mui-btn>
</div>
<div>
  <mui-btn style="flat" disabled>Button</mui-btn>
  <mui-btn style="flat" color="primary" disabled>Button</mui-btn>
  <mui-btn style="flat" color="danger" disabled>Button</mui-btn>
  <mui-btn style="flat" color="accent" disabled>Button</mui-btn>
</div>
View in new tab »

Raised buttons

Button Button Button Button
Button Button Button Button
<div>
  <mui-btn style="raised">Button</mui-btn>
  <mui-btn style="raised" color="primary">Button</mui-btn>
  <mui-btn style="raised" color="danger">Button</mui-btn>
  <mui-btn style="raised" color="accent">Button</mui-btn>
</div>
<div>
  <mui-btn style="raised" disabled>Button</mui-btn>
  <mui-btn style="raised" color="primary" disabled>Button</mui-btn>
  <mui-btn style="raised" color="danger" disabled>Button</mui-btn>
  <mui-btn style="raised" color="accent" disabled>Button</mui-btn>
</div>
View in new tab »

Floating action buttons

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

Button sizes

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