Alex Carpenter

I’ve never been a fan of a seperate <IconButton /> component. Finally landed on what feels like a nice naming scheme.

<button shape="square">
  <Icon />
</button>
<button shape="circle">
  <Icon />
</button>

Shape supports default | square | circle options where square and circle both removes the inline padding and sets the aspect-ratio to 1/1.

.btn {
  height: 2rem;
  padding-inline: 0.625rem;
}

.btn:is([data-shape="square"], [data-shape="circle"]) {
  padding-inline: 0;
  aspect-ratio: 1 / 1;
}