irradiant-svelte/types/Button.d.ts

Easily build sleek, minimalistic web apps with this easy to use and powerful svelte component library.

/// <reference types="svelte" />

export interface ButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
  /**
   * User defined classes
   * @default ""
   */
  className?: string;

  /**
   * Specifies the URL of the page the link goes to.
   * @default ""
   */
  href?: string;

  /**
   * The color of the button
   * @default "transparent"
   */
  color?:
    | "black"
    | "blue"
    | "green"
    | "grey"
    | "orange"
    | "pink"
    | "purple"
    | "red"
    | "transparent"
    | "white"
    | "yellow";

  /**
   * The size of the button
   * @default "md"
   */
  size?: "sm" | "md" | "lg";

  /**
   * Sets background to transparent and adds a border of `color`. On user interaction,
   * the background will be filled with the defined `color`
   * @default false
   */
  outlined?: boolean;

  /**
   * Disables all styling, including the core component
   * @default false
   */
  styled?: boolean;
}

export default class Button {
  $$prop_def: ButtonProps;
  $$slot_def: {
    default: {};
  };

  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
  $on(eventname: "dblclick", cb: (event: WindowEventMap["dblclick"]) => void): () => void;
  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
  $on(eventname: "mouseout", cb: (event: WindowEventMap["mouseout"]) => void): () => void;
  $on(eventname: string, cb: (event: Event) => void): () => void;
}