menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Button
    • ripple true/false
      Adds riple effect to the button
    • dense true/false
      Adds dense padding to the button
    • compact true/false
      Adds compact 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
    • stroked true/false
      Adds stroked effect to the button
Sample code
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>
    );
  }
}
Original documentation
This component encapsulates mdc-button, you can refer to its documentation here.
Demo
<Button>Default Flat button without ripple</Button>
<Button raised>Default Raised button</Button>
<Button unelevated>Default Unelevated button</Button>
<Button stroked>Default Stroked 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>
<Button raised compact>Compact Raised button{" "}</Button>
Note
Adding an href to the Button automatically makes it an <a>.