@penaprieto/design-system/dist/components/Button/Button.css

Multi-brand React design system with design tokens from Figma

.ds-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--br-xs, 4px);
  font-family: var(--font-family, 'Satoshi', sans-serif);
  transition: all 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
  cursor: pointer;
  gap: var(--size2, 8px);
  border: none;
  background: none;
}
.ds-btn--fullwidth { width: 100%; }
.ds-btn--loading { pointer-events: none; opacity: 0.7; }
.ds-btn__loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Variants */
.ds-btn--primary {
  background-color: var(--button-primary-bg-default);
  color: var(--button-primary-text, #fff);
  box-shadow: inset 0 0 0 2px var(--button-primary-border-default);
}
.ds-btn--primary:hover:not(:disabled) { background-color: var(--button-primary-bg-hover); }
.ds-btn--primary:active:not(:disabled) { background-color: var(--button-primary-bg-active); }
.ds-btn--primary:disabled { background-color: var(--button-primary-bg-disabled); cursor: not-allowed; }

.ds-btn--secondary {
  background-color: var(--button-secondary-bg-default);
  color: var(--button-secondary-text);
}
.ds-btn--secondary:hover:not(:disabled) { background-color: var(--button-secondary-bg-hover); }
.ds-btn--secondary:active:not(:disabled) { background-color: var(--button-secondary-bg-active); }
.ds-btn--secondary:disabled { background-color: var(--button-secondary-bg-disabled); cursor: not-allowed; }

.ds-btn--tertiary {
  background-color: transparent;
  color: var(--button-tertiary-text);
  box-shadow: inset 0 0 0 2px var(--button-tertiary-border-default);
}
.ds-btn--tertiary:hover:not(:disabled) { background-color: var(--button-tertiary-bg-hover); }
.ds-btn--tertiary:active:not(:disabled) { background-color: var(--button-tertiary-bg-active); }
.ds-btn--tertiary:disabled { box-shadow: inset 0 0 0 2px var(--button-tertiary-border-disabled); cursor: not-allowed; }

.ds-btn--ghost {
  background-color: transparent;
  color: var(--button-ghost-text);
}
.ds-btn--ghost:hover:not(:disabled) { background-color: var(--button-ghost-bg-hover); }
.ds-btn--ghost:active:not(:disabled) { background-color: var(--button-ghost-bg-active); }
.ds-btn--ghost:disabled { color: var(--button-ghost-text-disabled); cursor: not-allowed; }

/* Sizes */
.ds-btn--large {
  padding: var(--size3, 12px) var(--size6, 32px);
  font-size: var(--button-large-fontSize);
  font-weight: var(--button-large-fontWeight);
  line-height: var(--button-large-lineHeight);
}
.ds-btn--medium {
  padding: var(--size3, 12px) var(--size5, 24px);
  font-size: var(--button-medium-fontSize);
  font-weight: var(--button-medium-fontWeight);
  line-height: var(--button-medium-lineHeight);
}
.ds-btn--small {
  padding: var(--size3, 12px) var(--size4, 16px);
  font-size: var(--button-small-fontSize);
  font-weight: var(--button-small-fontWeight);
  line-height: var(--button-small-lineHeight);
}

.ds-btn--icon {
  padding: 0 !important;
  border-radius: var(--br-xs);
  width: auto; height: auto;
  min-width: unset; min-height: unset;
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-btn--icon.ds-btn--large { width: 48px; height: 48px; }
.ds-btn--icon.ds-btn--medium { width: 40px; height: 40px; }
.ds-btn--icon.ds-btn--small { width: 32px; height: 32px; }

.ds-btn__icon { display: flex; align-items: center; flex-shrink: 0; }
.ds-btn__icon svg { display: block; width: 24px; height: 24px; }
.ds-btn__icon:empty { display: none; }

.ds-btn__label { display: inline-block; }
.ds-btn__label--loading { opacity: 0; }