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

Production-grade Preact components that replicate the Figma UI design

.button {
  position: relative;
  z-index: var(--z-index-1);
  display: inline-block;
}

.fullWidth {
  display: block;
}

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

.button button {
  position: relative;
  display: inline-block;
  height: var(--space-24);
  padding: var(--space-0) var(--space-8);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-6);
}

.fullWidth button {
  display: block;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.default button {
  border-color: transparent;
  background-color: var(--figma-color-bg-brand);
  color: var(--figma-color-text-onbrand);
}

.default:not(.disabled) button:focus {
  border-color: var(--figma-color-border-onbrand);
}
.default:not(.disabled) button:focus-visible {
  box-shadow: 0 0 0 var(--border-width-1) var(--figma-color-bg) inset;
}
.default:not(.disabled) button:active {
  background-color: var(--figma-color-bg-brand-pressed);
}
.default.disabled button {
  background-color: var(--figma-color-bg-disabled);
  color: var(--figma-color-text-ondisabled);
}

.default.danger button {
  background-color: var(--figma-color-bg-danger);
  color: var(--figma-color-text-ondanger);
}
.default.danger:not(.disabled) button:focus {
  border-color: var(--figma-color-border-danger-strong);
}
.default.danger:not(.disabled) button:active {
  background-color: var(--figma-color-bg-danger-pressed);
}
.default.danger.disabled button {
  background-color: var(--figma-color-bg-disabled);
  color: var(--figma-color-text-ondisabled);
}

.secondary button {
  border-color: var(--figma-color-border);
  background-color: transparent;
  color: var(--figma-color-text);
}
.secondary:not(.disabled) button:focus {
  border-color: var(--figma-color-border-selected);
}
.secondary:not(.disabled) button:active {
  background-color: var(--figma-color-bg-pressed);
}
.secondary.disabled button {
  border-color: var(--figma-color-border-disabled);
  color: var(--figma-color-text-disabled);
}

.secondary.danger button {
  border-color: var(--figma-color-border-danger);
  color: var(--figma-color-text-danger);
}
.secondary.danger:not(.disabled) button:focus {
  border-color: var(--figma-color-border-danger-strong);
}
.secondary.danger.disabled button {
  border-color: var(--figma-color-border-disabled-strong);
  color: var(--figma-color-text-disabled);
}

.loadingIndicator {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.default .loadingIndicator {
  color: var(--figma-color-icon-onbrand);
}
.default.disabled .loadingIndicator {
  color: var(--figma-color-icon-ondisabled);
}

.default.danger .loadingIndicator {
  color: var(--figma-color-icon-ondanger);
}
.default.danger.disabled .loadingIndicator {
  color: var(--figma-color-icon-ondisabled);
}

.secondary .loadingIndicator {
  color: var(--figma-color-text);
}
.secondary.disabled .loadingIndicator {
  color: var(--figma-color-text-disabled);
}

.secondary.danger .loadingIndicator {
  color: var(--figma-color-text-danger);
}
.secondary.danger.disabled .loadingIndicator {
  color: var(--figma-color-text-disabled);
}

.children {
  display: inline;
  pointer-events: none;
}
.loading .children {
  visibility: hidden;
}