title: Material-UI <Radio /> with a <Button />-like appearance
body: <p>Using <strong>only</strong> Material-UI, is there any way to style <a href="https://material-ui.com/demos/selection-controls/#radio-buttons" rel="nofollow noreferrer"><code>&lt;Radio /&gt;</code></a> objects with a <a href="https://material-ui.com/demos/buttons/#text-buttons" rel="nofollow noreferrer"><code>&lt;Button /&gt;</code></a> type of appearance? If not, what would be the most simple alternative?</p>
  <p>After spending the past few days reading documentation and experimenting, I don't feel any closer to a solution. Thanks to anyone who can lend some guidance.</p>
  <p>Here's my starting point (without the <code>&lt;Button /&gt;</code> experiments) in case anyone would like to use what I'm working with:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import RadioGroup from '@material-ui/core/RadioGroup';
  import Radio from '@material-ui/core/Radio';
  import Button from '@material-ui/core/Button';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import FormControl from '@material-ui/core/FormControl';
  
  const styles = theme =&gt; ({
    textField: {
      marginLeft: theme.spacing.unit,
      marginRight: theme.spacing.unit,
      width: '100%',
    },
    formControl: {
      display: 'flex',
      flexBasis: '100%',
      alignItems: 'center',
    }
  });
  
  class QRadios extends React.PureComponent {
    constructor(props, context) {
      super(props, context);
      this.state = {
        value: this.props.value,
      };
    }
  
    handleChange = event =&gt; {
      this.setState({
        value: event.target.value,
      },
        this.props.onChange(event)); 
    };
  
    render() {
      const { classes } = this.props;
  
      return (
        &lt;FormControl component=&quot;ul&quot; className={classes.formControl} required&gt;
          &lt;RadioGroup
            row={true}
            id={this.props.id}
            name={this.props.name}
            value={this.state.value}
            onChange={this.handleChange}
          &gt;
            &lt;FormControlLabel
              htmlFor={this.props.id}
              value=&quot;good&quot;
              control={&lt;Radio /&gt;} 
            /&gt;
            &lt;FormControlLabel
              htmlFor={this.props.id}
              value=&quot;okay&quot;
              control={&lt;Radio /&gt;}
            /&gt;
            &lt;FormControlLabel
              htmlFor={this.props.id}
              value=&quot;bad&quot;
              control={&lt;Radio /&gt;} 
            /&gt;
            &lt;FormControlLabel
              htmlFor={this.props.id}
              value=&quot;na&quot;
              control={&lt;Radio /&gt;} 
            /&gt;
          &lt;/RadioGroup&gt;
        &lt;/FormControl&gt;
      );
    }
  }
  
  QRadios.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(QRadios);
  </code></pre>
  
  <hr />
  <h3>Update:</h3>
  <p>For anyone who is using an older version of Material-UI that lacks the built-in solution as per the answer below, you'll have to create your own CSS for the buttons. If you need help, this is how I implemented it:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import green from '@material-ui/core/colors/green';
  import yellow from '@material-ui/core/colors/yellow';
  import red from '@material-ui/core/colors/red';
  import grey from '@material-ui/core/colors/grey';
  import RadioGroup from '@material-ui/core/RadioGroup';
  import Radio from '@material-ui/core/Radio';
  import FormControl from '@material-ui/core/FormControl';
  import InputLabel from '@material-ui/core/InputLabel';
  
  const styles = theme =&gt; ({
    formControl: {
      display: 'flex',
      flexBasis: '100%',
      alignItems: 'stretch',
      margin: theme.spacing.unit * 3 / 2
    },
    formGroup: {
      alignItems: 'stretch',
      justifyContent: 'space-around',
      flexWrap: 'nowrap'
    },
    radioFlex: {
      flex: '1 1 auto',
      margin: '0 5px'
    },
    greenButtonRoot: {
      backgroundColor: '#00000004',
      borderRadius: 5,
      border: '1px solid',
      color: green.A700,
      fontFamily: 'monospace',
      fontSize: '180%',
      height: 32,
      '&amp;$checked': {
        backgroundColor: green.A700,
        color: 'white'
      },
      '&amp;:not($checked):hover': {
        backgroundColor: green['50']
      },
      transition: 'background-color 250ms'
    },
    yellowButtonRoot: {
      backgroundColor: '#00000004',
      borderRadius: 5,
      border: '1px solid',
      color: yellow['700'],
      fontFamily: 'monospace',
      fontSize: '200%',
      height: 32,
      '&amp;$checked': {
        backgroundColor: yellow.A700,
        color: 'white'
      },
      '&amp;:not($checked):hover': {
        backgroundColor: yellow['100']
      },
      transition: 'background-color 250ms'
    },
    redButtonRoot: {
      backgroundColor: '#00000004',
      borderRadius: 5,
      border: '1px solid',
      color: red.A700,
      fontFamily: 'monospace',
      fontSize: '160%',
      height: 32,
      '&amp;$checked': {
        backgroundColor: red.A700,
        color: 'white'
      },
      '&amp;:not($checked):hover': {
        backgroundColor: red['50']
      },
      transition: 'background-color 250ms'
    },
    greyButtonRoot: {
      backgroundColor: '#00000004',
      borderRadius: 5,
      border: '1px solid',
      color: grey['700'],
      fontFamily: 'monospace',
      fontSize: '180%',
      height: 32,
      '&amp;$checked': {
        backgroundColor: grey['700'],
        color: 'white'
      },
      '&amp;:not($checked):hover': {
        backgroundColor: grey['200']
      },
      transition: 'background-color 250ms'
    },
    disabled: {
      backgroundColor: '#00000004'
    },
    checked: {}
  });
  
  function QRadios(props) {
    const {
      classes,
      error,
      required,
      id,
      label,
      name,
      binaryChoice,
      value,
      onChange,
      onBlur
    } = props;
  
    return (
      &lt;FormControl className={classes.formControl} required={required}&gt;
        &lt;InputLabel
          error={error}
          required={required}
          shrink
          style={{
            position: 'relative',
            marginBottom: '10px'
          }}
        &gt;
          {label}
        &lt;/InputLabel&gt;
        &lt;RadioGroup
          className={classes.formGroup}
          row
  
          id={id}
          name={name}
  
          value={value}
          onChange={onChange}
          onBlur={onBlur}
        &gt;
          &lt;Radio
            htmlFor={id}
            className={classes.radioFlex}
  
            value=&quot;good&quot;
            classes={{
              root: classes.greenButtonRoot,
              checked: classes.checked
            }}
            icon=&quot;〇&quot;
            checkedIcon=&quot;〇&quot;
          /&gt;
          &lt;Radio
            htmlFor={id}
            className={classes.radioFlex}
  
            value=&quot;okay&quot;
            classes={{
              root: classes.yellowButtonRoot,
              checked: classes.checked,
              disabled: classes.disabled
            }}
            icon=&quot;△&quot;
            checkedIcon=&quot;△&quot;
            disabled={binaryChoice}
          /&gt;
          &lt;Radio
            htmlFor={id}
            className={classes.radioFlex}
  
            value=&quot;bad&quot;
            classes={{
              root: classes.redButtonRoot,
              checked: classes.checked
            }}
            icon=&quot;✕&quot;
            checkedIcon=&quot;✕&quot;
          /&gt;
          &lt;Radio
            htmlFor={id}
            className={classes.radioFlex}
  
            value=&quot;na&quot;
            classes={{
              root: classes.greyButtonRoot,
              checked: classes.checked
            }}
            icon=&quot;－&quot;
            checkedIcon=&quot;－&quot;
          /&gt;
        &lt;/RadioGroup&gt;
      &lt;/FormControl&gt;
    );
  }
  
  QRadios.propTypes = {
    classes: PropTypes.object.isRequired,
    required: PropTypes.bool,
    error: PropTypes.bool,
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    binaryChoice: PropTypes.bool,
    value: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    onBlur: PropTypes.func
  };
  
  QRadios.defaultProps = {
    required: false,
    binaryChoice: false,
    error: false,
    onBlur: null,
    value: ''
  };
  
  export default withStyles(styles)(QRadios);
  </code></pre>
  <p>Usage...</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;QRadios
      error={!whateverThing.isValid}
      id=&quot;whateverThing&quot;
      name=&quot;whateverThing&quot;
      label=&quot;What's your judgement of whateverThing?&quot;
      value={whateverThing.value}
      onChange={this.someHandlerFunc}
      onBlur={this.someCheckFunc}
  /&gt;
  </code></pre>