@octopusdeploy/design-system-components/dist/src/components/Button/Button.d.ts

The design systems component library.

import React from "react";
import type { DesignSystemLinkHref } from "../../routing";
import type { SupportedAriaPopupRole } from "../../utils/SupportedAriaPopupRole";
interface SharedButtonProps {
    /**
     * The importance of the button.
     */
    importance: ButtonImportance;
    /**
     * Controls whether the button is disabled.
     */
    disabled?: boolean;
    /**
     * The size of the button.
     */
    size?: ButtonSize;
    /**
     * The title to show when hovering the button.
     */
    title?: string;
    /**
     * The accessible name for the button.
     */
    accessibleName?: string;
    /**
     * The button icon. Will display to the left of the label if it exists.
     */
    icon?: React.ReactNode;
    /**
     * The tab index of the button.
     * This can be set to `-1` to disable the keyboard focusability of the button.
     */
    tabIndex?: -1;
}
export interface ButtonLinkProps extends SharedButtonProps {
    /**
     * The link href.
     */
    href: DesignSystemLinkHref;
    /**
     * Set this to true for links that navigate outside of the application.
     */
    external?: boolean;
    /**
     * Controls whether the link should open in a new tab.
     * For external links, this is always true and cannot be configured.
     */
    opensInNewTab?: boolean;
    /**
     * Adds the download icon to the button and if the button is also external it will hide the external link icon
     * (Both icons are not necessary).
     */
    isDownload?: boolean;
    /**
     * The link label.
     */
    label: string;
    /**
     * Optional callback for when the link is clicked.
     */
    onClick?: (event: React.MouseEvent) => void;
}
export interface ButtonBasicProps extends SharedButtonProps {
    /**
     * Callback for when the button is clicked.
     * If a promise is returned, the button will disabled while the promise is executing.
     */
    onClick: (event: React.MouseEvent) => Promise<unknown> | void;
    /**
     * The button label.
     */
    label?: string;
    /**
     * Display a custom menu caret icon next to the label.
     */
    showExpandCollapseIcon?: boolean;
    /**
     * Identifies the element (or elements) whose contents or presence are controlled by the button.
     */
    "aria-controls"?: string;
    /**
     * Indicates the availability and type of interactive popup element that can be triggered by an element.
     */
    "aria-haspopup"?: SupportedAriaPopupRole;
    /**
     * Indicates whether the  element this button controls is currently expanded or collapsed.
     */
    "aria-expanded"?: "true" | "false";
    /**
     * Controls whether the button has type="submit". Otherwise defaults to type="button"
     */
    isSubmit?: boolean;
    /**
     * Controls whether the button is automatically focused when shown.
     */
    autoFocus?: boolean;
    /**
     * Sets the form owner of the button element
     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form
     */
    formId?: string;
}
export type ButtonProps = ButtonBasicProps | ButtonLinkProps;
export type IconOnlyButtonProps = Omit<ButtonProps, "label"> & {
    icon: React.ReactNode;
    label?: never;
};
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
export declare const buttonImportanceLevels: readonly ["primary", "secondary", "tertiary", "destructive", "quiet", "loud", "neutral", "ghost"];
export type ButtonImportance = (typeof buttonImportanceLevels)[number];
export declare const buttonSizes: readonly ["medium", "small"];
export type ButtonSize = (typeof buttonSizes)[number];
export {};