@spectrum-web-components/styles/global-action-button.css

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library implementing Adobe's Spectrum design system. This package defines the CSS custom properties that implement design tokens from [Spectrum Tok

/**
 * Copyright 2026 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* Links as buttons do not support:
 * - selected
 * - disabled
 * - hold affordance
*/

/* Base defaults and host layout */
.spectrum-ActionButton,
::slotted(.spectrum-ActionButton) {
  --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);
  --spectrum-actionbutton-background-color-down: var(--system-action-button-background-color-down);
  --spectrum-actionbutton-background-color-focus: var(--system-action-button-background-color-focus);
  --spectrum-actionbutton-border-color-default: var(--system-action-button-border-color-default);
  --spectrum-actionbutton-border-color-hover: var(--system-action-button-border-color-hover);
  --spectrum-actionbutton-border-color-down: var(--system-action-button-border-color-down);
  --spectrum-actionbutton-border-color-focus: var(--system-action-button-border-color-focus);
  --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-m-border-radius-default);
  --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
  --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
  --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
  --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
  --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
  --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
  --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
  --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
  --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100);
  --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100);
  --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100);
  --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100);
  --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
  --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100);
  --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
  --spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height));
  --spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size));
  --spectrum-actionbutton-font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-sized-font-size));
  --spectrum-actionbutton-text-to-visual: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-sized-text-to-visual));
  --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width)));
  --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width)));
  --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)));

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  display: inline-flex;
  position: relative;
  gap: calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only));
  align-items: center;
  justify-content: center;
  min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
  block-size: var(--spectrum-actionbutton-height);
  padding-inline: var(--spectrum-actionbutton-edge-to-text);
  margin: 0;
  font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
  font-size: var(--spectrum-actionbutton-font-size);
  line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
  vertical-align: top;
  color: var(--spectrum-actionbutton-content-color);
  text-transform: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: var(--spectrum-actionbutton-background-color);
  border-color: var(--spectrum-actionbutton-border-color);
  border-style: solid;
  border-width: var(--spectrum-actionbutton-border-width);
  border-radius: var(--spectrum-actionbutton-border-radius);
  overflow: visible;
  -webkit-appearance: button;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
    border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
    color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
    box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
}

/* Size variants */
.spectrum-ActionButton--sizeXS,
::slotted(.spectrum-ActionButton--sizeXS) {
  --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50);
  --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50);
  --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50);
  --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-50);
  --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
  --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-50);
  --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width));
  --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-xs-border-radius-default);

  min-width: var(--spectrum-actionbutton-height, 0);
}

.spectrum-ActionButton--sizeS,
::slotted(.spectrum-ActionButton--sizeS) {
  --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75);
  --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75);
  --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75);
  --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-75);
  --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
  --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-75);
  --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
  --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-s-border-radius-default);
}

.spectrum-ActionButton--sizeM,
::slotted(.spectrum-ActionButton--sizeM) {
  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
}

.spectrum-ActionButton--sizeL,
::slotted(.spectrum-ActionButton--sizeL) {
  --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200);
  --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200);
  --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200);
  --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-200);
  --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
  --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-200);
  --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
  --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-l-border-radius-default);
}

.spectrum-ActionButton--sizeXL,
::slotted(.spectrum-ActionButton--sizeXL) {
  --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300);
  --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300);
  --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300);
  --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-300);
  --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
  --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-300);
  --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
  --spectrum-actionbutton-border-radius-default: var(--system-action-button-size-xl-border-radius-default);
}

/* Variant tokens */
.spectrum-ActionButton--quiet,
::slotted(.spectrum-ActionButton--quiet) {
  --spectrum-actionbutton-border-color: transparent;
  --spectrum-actionbutton-background-color-default: var(--system-action-button-quiet-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-quiet-background-color-hover);
  --spectrum-actionbutton-background-color-down: var(--system-action-button-quiet-background-color-down);
  --spectrum-actionbutton-background-color-focus: var(--system-action-button-quiet-background-color-focus);
}

.spectrum-ActionButton--staticBlack,
::slotted(.spectrum-ActionButton--staticBlack) {
  --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-static-black-content-color-default, var(--spectrum-black));
  --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-static-black-content-color-hover, var(--spectrum-black));
  --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-static-black-content-color-down, var(--spectrum-black));
  --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-static-black-content-color-focus, var(--spectrum-black));
  --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
  --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-border-color-default);
  --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-border-color-hover);
  --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-border-color-down);
  --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-border-color-focus);
  --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-background-color-hover);
  --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-background-color-down);
  --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-background-color-focus);
  --spectrum-actionbutton-static-black-content-color-default: var(--system-action-button-static-black-content-color-default);
  --spectrum-actionbutton-static-black-content-color-hover: var(--system-action-button-static-black-content-color-hover);
  --spectrum-actionbutton-static-black-content-color-down: var(--system-action-button-static-black-content-color-down);
  --spectrum-actionbutton-static-black-content-color-focus: var(--system-action-button-static-black-content-color-focus);
}

.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet,
::slotted(.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet) {
  --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-quiet-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-quiet-background-color-hover);
  --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-quiet-background-color-down);
  --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-quiet-background-color-focus);
}

.spectrum-ActionButton--staticWhite,
::slotted(.spectrum-ActionButton--staticWhite) {
  --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-static-white-content-color-default, var(--spectrum-white));
  --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-static-white-content-color-hover, var(--spectrum-white));
  --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-static-white-content-color-down, var(--spectrum-white));
  --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-static-white-content-color-focus, var(--spectrum-white));
  --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
  --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-border-color-default);
  --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-border-color-hover);
  --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-border-color-down);
  --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-border-color-focus);
  --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-background-color-hover);
  --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-background-color-down);
  --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-background-color-focus);
  --spectrum-actionbutton-static-white-content-color-default: var(--system-action-button-static-white-content-color-default);
  --spectrum-actionbutton-static-white-content-color-hover: var(--system-action-button-static-white-content-color-hover);
  --spectrum-actionbutton-static-white-content-color-down: var(--system-action-button-static-white-content-color-down);
  --spectrum-actionbutton-static-white-content-color-focus: var(--system-action-button-static-white-content-color-focus);
}

.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet,
::slotted(.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet) {
  --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-quiet-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-quiet-background-color-hover);
  --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-quiet-background-color-down);
  --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-quiet-background-color-focus);
}

/* Interactive state tokens */

@media (hover: hover) {
  .spectrum-ActionButton:hover,
  ::slotted(.spectrum-ActionButton:hover) {
    --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
    --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
    --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover));
  }
}

.spectrum-ActionButton:focus-visible,
::slotted(.spectrum-ActionButton:focus-visible) {
  --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
  --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
  --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus));

  box-shadow: none;
  outline: none;
}

.spectrum-ActionButton:active,
::slotted(.spectrum-ActionButton:active) {
  --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
  --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
  --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down));
}

/* Directionality and structural elements */
.spectrum-ActionButton:dir(rtl),
::slotted(.spectrum-ActionButton:dir(rtl)) {
  --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}

.spectrum-ActionButton:focus,
::slotted(.spectrum-ActionButton:focus) {
  outline: none;
}

.spectrum-ActionButton::after {
  position: absolute;
  inset: 0;
  margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
  border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));
  pointer-events: none;
  content: "";
  transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
}

.spectrum-ActionButton:focus-visible::after {
  box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color);
}

.spectrum-ActionButton :is([slot="icon"], svg, img) {
  flex-shrink: 0;
  inline-size: var(--spectrum-actionbutton-icon-size);
  block-size: var(--spectrum-actionbutton-icon-size);
  max-block-size: 100%;
  margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text));
  margin-inline-end: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
  color: inherit;
}

.spectrum-ActionButton--iconOnly :is([slot="icon"], svg, img) {
  margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
}

.spectrum-ActionButton-label {
  flex-grow: var(--spectrum-actionbutton-label-flex-grow);
  place-self: center;
  font-size: var(--spectrum-actionbutton-font-size);
  line-height: var(--spectrum-actionbutton-height);
  color: var(--mod-actionbutton-label-color, inherit);
  text-align: var(--spectrum-actionbutton-label-text-align);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none !important;
}

/* Forced colors */
@media (forced-colors: active) {
  .spectrum-ActionButton,
  ::slotted(.spectrum-ActionButton) {
    --highcontrast-actionbutton-focus-indicator-color: ButtonText;
    --highcontrast-actionbutton-content-color: ButtonText;
  }

  .spectrum-ActionButton::after {
    forced-color-adjust: none;
  }
}