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.
    • 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.
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 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>
Note
Adding an href to the Button automatically makes it an <a>.