CODEWITHSUNDEEP
reactjsmaterial-ui
GRZa
GRZa

Reputation: 803

How can I keep Link and IconButton on the same line?

I have a link with a long text and a "copy" icon after it. I don't want the icon to be ever rendered on a separate line alone.

So these should be ok:

enter image description here

enter image description here

But not this:

enter image description here

The basic code is:

<>
 <Link>cat dog cow pig owl rabbit hare wolf fox</Link>
 <IconButton><EditIcon/></IconButton>
</>

I can easily place the icon to the right with a flexbox, but not sure how I effectively insert a non-breaking space between a text and an icon.

Upvotes: 1

Views: 155

Answers (1)

Isaac Smith
Isaac Smith

Reputation: 147

I just ran into the same problem and I managed to solve it using MUI's Grid. I had to do some string splitting in my case, so I included here as well. Hope this helps!


<Link onClick={() => { alert('test'); }}>
  <Grid container direction="row" alignItems="center">
    <Grid item>
      <Typography variant="body1">
        {linkText.split(' ').slice(0, -1).join(' ')}
      </Typography>
    </Grid>
    <Grid item>
      <Typography variant="body1" display="flex" alignItems="center">
        {linkText.split(' ').slice(-1)}
        <IconButton>
          <EditIcon
            onClick={(event) => {
              event?.stopPropagation();
              // do stuff
            }}
          />
        </IconButton>
      </Typography>
    </Grid>
  </Grid>
</Link>

Upvotes: 1

Related Questions