• Button
  • ripple true/false

    Adds riple effect to the button.
  • dense true/false

    Adds dense padding to the button.
  • raised true/false

    Adds raised effect to the button.
  • disabled true/false

    Disables the button.
  • unelevated true/false

    Adds unelevated effect to the button.
  • outlined true/false

    Adds outlined effect to the button.
  • primary true/false

    Adds primary color to button.
  • secondary true/false

    Adds secondary color to button.

import {h, Component} from 'preact';
import Button from 'preact-material-components/Button';
import 'preact-material-components/Button/style.css';
import 'preact-material-components/Theme/style.css';

export default class ButtonsPage extends Component {
  render(){
    return (
      <div>
        <Button ripple raised>
          Flat button with ripple
        </Button>
        <Button ripple raised className="mdc-theme--primary-bg">
          Primary background button
        </Button>
        <Button href="/">This button will be rendered as an anchor</Button>
      </div>
    );
  }
}

<Button>Default Flat button without ripple</Button>

<Button raised>Default Raised button</Button>

<Button unelevated>Default Unelevated button</Button>

<Button outlined>Default outlined button</Button>

<Button raised disabled>Disabled Raised button</Button>

<Button raised ripple>Raised button with ripple</Button>

<Button raised className="mdc-theme--primary-bg">Primary Raised button{" "}</Button>

<Button raised className="mdc-theme--secondary-bg">Secondary Raised button{" "}</Button>

<Button raised dense>Dense Raised button{" "}</Button>