# 2026-07-31-1

Published: Sat, Aug 01, 2026

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

```html
<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`.

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

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