@spectrum-web-components/button/src/Button.d.ts

An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte

/**
 * Copyright 2025 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.
 */
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
import { ButtonBase } from './ButtonBase.js';
import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
export type DeprecatedButtonVariants = 'cta' | 'overBackground';
export type ButtonStaticColors = 'white' | 'black';
export type ButtonVariants = 'accent' | 'primary' | 'secondary' | 'negative' | ButtonStaticColors | DeprecatedButtonVariants;
export declare const VALID_VARIANTS: string[];
export declare const VALID_STATIC_COLORS: string[];
export type ButtonTreatments = 'fill' | 'outline';
declare const Button_base: typeof ButtonBase & {
    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
    prototype: import("@spectrum-web-components/base").SizedElementInterface;
} & import("@spectrum-web-components/core/shared/base/sizedMixin.js").SizedElementConstructor;
/**
 * @element sp-button
 *
 * @slot - text label of the Button
 * @slot icon - The icon to use for Button
 */
export declare class Button extends Button_base {
    static get styles(): CSSResultArray;
    pendingLabel: string;
    pending: boolean;
    pendingStateController: PendingStateController<this>;
    /**
     * Initializes the `PendingStateController` for the Button component.
     * The `PendingStateController` manages the pending state of the Button.
     */
    constructor();
    click(): void;
    /**
     * The visual variant to apply to this button.
     */
    get variant(): ButtonVariants;
    set variant(variant: ButtonVariants);
    private _variant;
    /**
     * The static color variant to use for this button.
     */
    staticColor?: 'black' | 'white';
    /**
     * The visual treatment to apply to this button.
     */
    treatment: ButtonTreatments;
    /**
     * Style this button to be less obvious
     */
    set quiet(quiet: boolean);
    /**
     * Disables text wrapping within the button component's label.
     * Please note that this option is not a part of the design specification
     * and should be used carefully, with consideration of this overflow behavior
     * and the readability of the button's content.
     */
    noWrap: boolean;
    get quiet(): boolean;
    protected firstUpdated(changes: PropertyValues<this>): void;
    protected renderButton(): TemplateResult;
}
export {};