@create-figma-plugin/ui/lib/components/icon-button/icon-button.module.css

Production-grade Preact components that replicate the Figma UI design

.iconButton {
  position: relative;
  width: var(--space-24);
  height: var(--space-24);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-4);
}

.iconButton:not(.disabled) {
  color: var(--figma-color-icon);
}
.iconButton:not(.disabled):hover,
.iconButton:not(.disabled):active {
  background-color: var(--figma-color-bg-hover);
}
.iconButton:not(.disabled):focus-visible {
  border-color: var(--figma-color-border-selected);
}

.disabled,
.disabled * {
  cursor: not-allowed;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.disabled .icon {
  color: var(--figma-color-icon-disabled);
}