CODEWITHSUNDEEP
reactjsmaterial-ui
Manu
Manu

Reputation: 99

Is there a way to create a button with a linear progress within it, using material-ui?

I want to create a button with a built-in linear progress bar. something like this experience, but with Material components: https://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/

I know that there's a way to integrate <CircularProgress/> into a button, is there a way to integrate <LinearProgress/>? it didn't work for me.

Thanks in advance.

Upvotes: 3

Views: 3109

Answers (2)

James
James

Reputation: 82096

Much like the CircularProgress example, which I presume you are referring to this, it's just about getting the CSS correct.

I've forked that example and added a button that has LinearProgress integrated to give you an idea, the relevant code for that example is:

linearProgress: {
  position: "absolute",
  top: 0,
  width: "100%",
  height: "100%",
  opacity: 0.4,
  borderRadius: 4
}
...

<div className={classes.wrapper}>
  <Button
    variant="contained"
    color="primary"
    className={buttonClassname}
    disabled={loading}
    onClick={handleButtonClick}
  >
    Linear
  </Button>
  {loading && (
    <LinearProgress
      color="secondary"
      className={classes.linearProgress}
    />
  )}
  </div>

Edit Material demo

Upvotes: 5

thedude
thedude

Reputation: 9812

Something like this:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import LinearProgress from '@material-ui/core/LinearProgress'

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  button: {
    margin: theme.spacing(1),
  },
}))

export default function ContainedButtons() {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <Button variant="contained" className={classes.button}>
        <div>
          Demo
          <LinearProgress variant="determinate" value={75} />
        </div>
      </Button>
    </div>
  )
}

Edit Material demo

Upvotes: 0

Related Questions