@patreon/studio/module/components/Button/Button.module.css

Patreon Studio Design System

.root {
  align-items: center;
  background-color: var(--Button-backgroundColor);
  border: var(--Button-border);
  border-radius: var(--global-radius-md);
  box-shadow: var(--Button-boxShadow);
  box-sizing: border-box;
  color: var(--Button-foregroundColor);
  display: inline-flex;
  justify-content: center;
  outline-offset: 0;
  padding: var(--Button-padding);
  position: relative;
  text-decoration: none;
  transition: var(--global-transition-regular-easing) var(--global-transition-regular-duration);
}

.root:focus-visible {
    background-color: var(--Button-focusColor, var(--Button-backgroundHoverColor));
    outline-offset: var(--global-space-x4);
  }

.root:focus {
    border: var(--Button-border);
  }

.root:focus:not(:focus-visible) {
    border: var(--Button-borderHover);
    outline: none;
  }

.root[aria-disabled="true"] {
    opacity: var(--global-opacity-disabled);
  }

.root.isActive:hover {
      background-color: var(--Button-backgroundHoverColor);
      border: var(--Button-borderHover);
      box-shadow: var(--Button-boxShadowHover);
    }

.root.isActive:active {
      background-color: var(--Button-backgroundPressedColor);
      border: var(--Button-borderPressed);
    }

.root.isInactive {
    cursor: not-allowed;
  }

.root.cornersPill {
    border-radius: var(--global-radius-pill);
  }

.root.hasDimensions {
    max-height: var(--Button-dimension);
    min-height: var(--Button-dimension);
  }

.root.hasDimensions.variantIconOnly {
      min-width: var(--Button-dimension);
    }

/* Fluid */
.fluidSet {
    width: 100%;
  }
.fluidUnset {
    width: auto;
    width: initial;
  }

/* Themes */
.themePrimary.isFilled {
    --Button-foregroundColor: var(--global-primary-onSurface-default);
    --Button-backgroundColor: var(--global-primary-surface-default);
    --Button-backgroundHoverColor: var(--global-primary-surface-hover);
    --Button-backgroundPressedColor: var(--global-primary-surface-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }
.themePrimary.isUnfilled {
    --Button-foregroundColor: var(--global-content-primary-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-primary-surfaceMuted-hover);
    --Button-backgroundPressedColor: var(--global-primary-surfaceMuted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-focusColor: var(--global-primary-surfaceMuted-default);
  }

.themeSecondary.isFilled {
    --Button-foregroundColor: var(--global-primary-onSurfaceMuted-default);
    --Button-backgroundColor: var(--global-primary-surfaceMuted-default);
    --Button-backgroundHoverColor: var(--global-primary-surfaceMuted-hover);
    --Button-backgroundPressedColor: var(--global-primary-surfaceMuted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeSecondary.isUnfilled {
    --Button-foregroundColor: var(--global-primary-onSurfaceMuted-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-primary-surfaceSubtle-hover);
    --Button-backgroundPressedColor: var(--global-primary-surfaceSubtle-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-focusColor: var(--global-primary-surfaceSubtle-default);
  }

.themeTertiary.isFilled {
    --Button-foregroundColor: var(--global-content-regular-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: "transparent";
    --Button-backgroundPressedColor: "transparent";
    --Button-border: var(--global-borderWidth-thin) solid var(--global-border-action-default);
    --Button-borderHover: var(--global-borderWidth-thin) solid var(--global-border-action-hover);
    --Button-borderPressed: var(--global-borderWidth-thin) solid var(--global-border-action-pressed);
  }

.themeTertiary.isUnfilled {
    --Button-foregroundColor: var(--global-content-muted-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-primary-surfaceSubtle-hover);
    --Button-backgroundPressedColor: var(--global-primary-surfaceSubtle-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-focusColor: var(--global-primary-surfaceSubtle-default);
  }

.themeCritical.isFilled {
    --Button-foregroundColor: var(--global-critical-onSurface-default);
    --Button-backgroundColor: var(--global-critical-surface-default);
    --Button-backgroundHoverColor: var(--global-critical-surface-hover);
    --Button-backgroundPressedColor: var(--global-critical-surface-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeCritical.isUnfilled {
    --Button-foregroundColor: var(--global-critical-surface-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-critical-surfaceMuted-default);
    --Button-backgroundPressedColor: var(--global-critical-surfaceMuted-hover);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeFloating.isFilled {
    --Button-foregroundColor: var(--global-content-regular-default);
    --Button-backgroundColor: var(--global-bg-elevated-default);
    --Button-backgroundHoverColor: var(--global-bg-elevated-hover);
    --Button-backgroundPressedColor: var(--global-bg-elevated-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-boxShadow: var(--global-boxShadow-mid);
  }

.themeFloating.isUnfilled {
    --Button-foregroundColor: var(--global-content-regular-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-bg-elevated-hover);
    --Button-backgroundPressedColor: var(--global-bg-elevated-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-boxShadowHover: var(--global-boxShadow-mid);
  }

.themeInsetWhite.isFilled {
    --Button-foregroundColor: var(--global-constant-black-default);
    --Button-backgroundColor: var(--global-constant-white-default);
    --Button-backgroundHoverColor: var(--global-constant-white-hover);
    --Button-backgroundPressedColor: var(--global-constant-white-pressed);
    --Button-border: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-default);
    --Button-borderHover: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-hover);
    --Button-borderPressed: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-pressed);
  }

.themeInsetWhite.isUnfilled {
    --Button-foregroundColor: var(--global-constant-white-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-constant-blackSubtle-hover);
    --Button-backgroundPressedColor: var(--global-constant-blackSubtle-pressed);
    --Button-border: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-default);
    --Button-borderHover: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-hover);
    --Button-borderPressed: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-pressed);
  }

.themeInsetBlack.isFilled {
    --Button-foregroundColor: var(--global-constant-white-default);
    --Button-backgroundColor: var(--global-constant-blackMuted-default);
    --Button-backgroundHoverColor: var(--global-constant-blackMuted-hover);
    --Button-backgroundPressedColor: var(--global-constant-blackMuted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeInsetBlack.isUnfilled {
    --Button-foregroundColor: var(--global-constant-white-default);
    --Button-backgroundColor: "transparent";
    --Button-backgroundHoverColor: var(--global-constant-blackSubtle-hover);
    --Button-backgroundPressedColor: var(--global-constant-blackSubtle-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

/* Sizes */
.sizeXs {
  --Button-dimension: 32px;
}
.sizeXs.variantLabelOnly,.sizeXs.variantLabelAndIcon,.sizeXs.variantDisclosureAndLabel,.sizeXs.variantIconAndDisclosureOnly,.sizeXs.variantIconLabelAndDisclosure {
    --Button-padding: 0 8px;
  }

.sizeSm {
  --Button-dimension: 36px;
}

.sizeSm.variantLabelOnly {
    --Button-padding: 0 18px;
  }

.sizeSm.variantLabelAndIcon {
    --Button-padding: 0 18px 0 14px;
  }

.sizeSm.variantDisclosureAndLabel {
    --Button-padding: 0 14px 0 18px;
  }

.sizeSm.variantIconAndDisclosureOnly {
    --Button-padding: 0 8px;
  }

.sizeSm.variantIconLabelAndDisclosure {
    --Button-padding: 0 14px;
  }

.sizeMd {
  --Button-dimension: 44px;
}

.sizeMd.variantLabelOnly {
    --Button-padding: 0 20px;
  }

.sizeMd.variantLabelAndIcon {
    --Button-padding: 0 20px 0 18px;
  }

.sizeMd.variantDisclosureAndLabel {
    --Button-padding: 0 18px 0 20px;
  }

.sizeMd.variantIconAndDisclosureOnly {
    --Button-padding: 0 10px;
  }

.sizeMd.variantIconLabelAndDisclosure {
    --Button-padding: 0 18px;
  }

.sizeLg {
  --Button-dimension: 64px;
}

.sizeLg.variantLabelOnly {
    --Button-padding: 0 34px;
  }

.sizeLg.variantLabelAndIcon {
    --Button-padding: 0 34px 0 30px;
  }

.sizeLg.variantDisclosureAndLabel {
    --Button-padding: 0 30px 0 34px;
  }

.sizeLg.variantIconAndDisclosureOnly {
    --Button-padding: 0 20px;
  }

.sizeLg.variantIconLabelAndDisclosure {
    --Button-padding: 0 30px;
  }

/* Content container */
.contentContainer {
  align-items: center;
  -moz-column-gap: var(--global-space-x8);
       column-gap: var(--global-space-x8);
  display: flex;
  justify-content: center;
  margin: auto 0;
  padding: 0;
  visibility: visible;
}
.isLoading .contentContainer {
    visibility: hidden;
  }
.hasTextAlign .contentContainer {
    width: 100%;
  }

/* Label container */
.labelContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  white-space: nowrap;
}
.hasTextAlign .labelContainer {
    flex-grow: 1;
  }
.textAlignLeft .labelContainer {
    align-items: flex-start;
  }
.textAlignRight .labelContainer {
    align-items: flex-end;
  }

/* Loading spinner */
.loadingWrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
@media (min-width: 588px) {

  .fluidSetBreakpointSm {
    width: 100%;
  }

  .fluidUnsetBreakpointSm {
    width: auto;
    width: initial;
  }
.sizeXs {
    --Button-dimension: 28px;
}

.sizeSm {
    --Button-dimension: 32px;
}

    .sizeSm.variantLabelOnly {
      --Button-padding: 0 16px;
    }

    .sizeSm.variantLabelAndIcon {
      --Button-padding: 0 16px 0 12px;
    }

    .sizeSm.variantDisclosureAndLabel {
      --Button-padding: 0 12px 0 16px;
    }

    .sizeSm.variantIconLabelAndDisclosure {
      --Button-padding: 0 12px;
    }

.sizeMd {
    --Button-dimension: 40px;
}

    .sizeMd.variantLabelAndIcon {
      --Button-padding: 0 20px 0 16px;
    }

    .sizeMd.variantDisclosureAndLabel {
      --Button-padding: 0 16px 0 20px;
    }

    .sizeMd.variantIconLabelAndDisclosure {
      --Button-padding: 0 16px;
    }

.sizeLg {
    --Button-dimension: 52px;
}

    .sizeLg.variantLabelOnly {
      --Button-padding: 0 24px;
    }

    .sizeLg.variantLabelAndIcon {
      --Button-padding: 0 24px 0 20px;
    }

    .sizeLg.variantDisclosureAndLabel {
      --Button-padding: 0 20px 0 24px;
    }

    .sizeLg.variantIconAndDisclosureOnly {
      --Button-padding: 0 14px;
    }

    .sizeLg.variantIconLabelAndDisclosure {
      --Button-padding: 0 20px;
    }
}
@media (min-width: 796px) {

  .fluidSetBreakpointMd {
    width: 100%;
  }

  .fluidUnsetBreakpointMd {
    width: auto;
    width: initial;
  }
}
@media (min-width: 978px) {

  .fluidSetBreakpointLg {
    width: 100%;
  }

  .fluidUnsetBreakpointLg {
    width: auto;
    width: initial;
  }
}
@media (min-width: 1280px) {

  .fluidSetBreakpointXl {
    width: 100%;
  }

  .fluidUnsetBreakpointXl {
    width: auto;
    width: initial;
  }
}
@media (min-width: 1440px) {

  .fluidSetBreakpointXxl {
    width: 100%;
  }

  .fluidUnsetBreakpointXxl {
    width: auto;
    width: initial;
  }
}