CODEWITHSUNDEEP
javascriptcssreactjsmaterial-designmaterial-ui
Duncan Jones
Duncan Jones

Reputation: 69329

Full width material-ui Button within a Badge?

I have a Button inside a Grid and was using fullWidth to expand it to fill the container.

This worked fine, until I wrapped it in a Badge. Now the fullWidth property is ignored and the button is default width.

Worked fine:

<Button variant={"outlined"} color={"secondary"} fullWidth>
    Todo
</Button>

Now not working:

<Badge badgeContent={4} color={"secondary"}>
    <Button variant={"outlined"} color={"secondary"} fullWidth>
        Todo
    </Button>
</Badge>

How can I get the button to expand to fill its parent?

import React, {Component} from 'react';
import Grid from "@material-ui/core/Grid/Grid";
import Button from "@material-ui/core/Button/Button";
import Badge from "@material-ui/core/Badge/Badge";


export default class App extends Component {
    render() {
        return (

            <Grid container style={{margin: 10}}>
                <Grid item xs={2}>

                    <Badge badgeContent={4} color={"secondary"}>
                        <Button variant={"outlined"} color={"secondary"} fullWidth>
                            Todo badge
                        </Button>
                    </Badge>

                    <Button variant={"outlined"} color={"secondary"} fullWidth>
                        Todo no badge
                    </Button>
                </Grid>
                <Grid item xs={10}>

                </Grid>
            </Grid>
        );
    }
};

Upvotes: 9

Views: 37459

Answers (5)

lucach
lucach

Reputation: 43

The width property needs to be applied to the root component (.MuiBadge-root) that holds both the actual badge and its child (the button in your example).

You can customize its style in various ways. Here I'm using styled:

const MyBadge = styled(Badge)({
  width: '100%'
})

<MyBadge badgeContent="1" color="secondary">
  <Button variant="contained" color="primary" fullWidth>
    Hello World
  </Button>
</MyBadge>

Working example on CodeSandbox

Upvotes: 0

Abdelrahman Tareq
Abdelrahman Tareq

Reputation: 2297

Just add this property: fullWidth={true}

import { Button } from "@mui/material";
 <Button
          variant="contained"
          fullWidth={true}
          type="submit"
        >
          Click me
        </Button>

docs: https://mui.com/api/button/

Upvotes: 3

Eric
Eric

Reputation: 567

One easy way is to use the sx prop on the Badge to set the width to '100%'.

<Badge sx={{ width: '100%' }} variant="dot" color="primary" badgeContent={1}>
  <Button fullWidth variant="contained"  color="neutral">
    Button
  </Button>
</Badge>

And make sure you have fullWidth set on the Button

Upvotes: 2

Nadun
Nadun

Reputation: 7853

I could come up with a solution using width CSS property:

here is my answer:

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2,
    width: '100%'
  }
});

function SimpleBadge(props) {
  const { classes } = props;
  return (
    <Grid container>
      <Grid item xs={11}>
      <Badge color="primary" badgeContent={4} className={classes.margin} >
        <Button variant="contained" fullWidth>Button</Button>
      </Badge>

      </Grid>
    </Grid>
  );
}

please find that I have used width: '100%' in badge styles.

here is a working example: https://codesandbox.io/s/wqm9kmxmql

hope this will help you.

Upvotes: 1

samnu pel
samnu pel

Reputation: 914

you have to apply fullWidth property to badge 

<Badge badgeContent={4} color={"secondary"} fullWidth>
    <Button variant={"outlined"} color={"secondary"}>
        Todo
    </Button>
</Badge>

Upvotes: 5

Related Questions