irradiant-svelte/types/Badge.d.ts

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

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

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

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

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

  /**
   * Apply border around badge
   * @default ""
   */
  outline?: "light" | "dark";

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

  /**
   * If the badge should be a button element instead of a static or a link element
   * @default false
   */
  button?: boolean;
}

export default class Badge {
  $$prop_def: BadgeProps;
  $$slot_def: {
    default: {};
  };

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