@esri/calcite-components/dist/types/components/button/button.d.ts

Web Components for Esri's Calcite Design System.

import { VNode } from "../../stencil-public-runtime";
import { FormOwner } from "../../utils/form";
import { InteractiveComponent } from "../../utils/interactive";
import { LabelableComponent } from "../../utils/label";
import { LoadableComponent } from "../../utils/loadable";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
import { ButtonMessages } from "./assets/button/t9n";
import { ButtonAlignment } from "./interfaces";
/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
/** @slot - A slot for adding text. */
export declare class Button implements LabelableComponent, InteractiveComponent, FormOwner, LoadableComponent, LocalizedComponent, T9nComponent {
  el: HTMLCalciteButtonElement;
  /** Specifies the alignment of the component's elements. */
  alignment: ButtonAlignment;
  /** Specifies the appearance style of the component. */
  appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>;
  /** Accessible name for the component. */
  label: string;
  /** Specifies the kind of the component (will apply to border and background if applicable). */
  kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */
  disabled: boolean;
  /**
   * The ID of the form that will be associated with the component.
   *
   * When not set, the component will be associated with its ancestor form element, if any.
   */
  form: string;
  /**
   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
   */
  href: string;
  /** Specifies an icon to display at the end of the component. */
  iconEnd: string;
  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
  iconFlipRtl: FlipContext;
  /** Specifies an icon to display at the start of the component. */
  iconStart: string;
  /**
   * When `true`, a busy indicator is displayed and interaction is disabled.
   */
  loading: boolean;
  /** Specifies the name of the component on form submission. */
  name?: string;
  /**
   * Defines the relationship between the `href` value and the current document.
   *
   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
   */
  rel: string;
  /** When `true`, adds a round style to the component. */
  round: boolean;
  /** Specifies the size of the component. */
  scale: Scale;
  /** Specifies if the component is a child of a `calcite-split-button`. */
  splitChild: "primary" | "secondary" | false;
  /**
   * Specifies where to open the linked document defined in the `href` property.
   *
   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
   */
  target: string;
  /**
   * Specifies the default behavior of the button.
   *
   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
   */
  type: string;
  /** Specifies the width of the component. */
  width: Width;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: ButtonMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<ButtonMessages>;
  loadingChanged(newValue: boolean, oldValue: boolean): void;
  onMessagesChange(): void;
  connectedCallback(): Promise<void>;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  componentDidRender(): void;
  render(): VNode;
  /** Sets focus on the component. */
  setFocus(): Promise<void>;
  formEl: HTMLFormElement;
  labelEl: HTMLCalciteLabelElement;
  /** watches for changing text content */
  private mutationObserver;
  /** the rendered child element */
  private childEl?;
  /** determine if there is slotted content for styling purposes */
  private hasContent;
  /** determine if loader present for styling purposes */
  private hasLoader;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  defaultMessages: ButtonMessages;
  private updateHasContent;
  private setupTextContentObserver;
  /** keeps track of the tooltipText */
  tooltipText: string;
  /** keep track of the rendered contentEl */
  private contentEl;
  resizeObserver: ResizeObserver;
  onLabelClick(): void;
  private handleClick;
  private setTooltipText;
  private setChildEl;
}