Button

import { Button } from "@lualtek/react-components";
 
export default () => {
  return <Button>Click</Button>;
};

export type ButtonProps = {
  /**
   * Set the style of the component.
   * When disabled the style is overwritten.
   * @default 'primary'
   */
  kind?: "primary" | "secondary" | "flat";
 
  /**
   * Set the size of the component.
   * @default 'regular'
   */
  dimension?: "regular" | "small" | "big";
 
  /**
   * Make the component full width, filling the available space.
   */
  fullWidth?: boolean;
 
  /**
   * Define the icon to use.
   */
  icon?: IconProps["source"];
 
  /**
   * Set the position of the icon. Used only when icon is defined.
   * @default 'start'
   */
  iconPosition?: "start" | "end";
 
  /**
   * Override the color of the icon. Used only when icon is defined.
   */
  iconColor?: string;
 
  /**
   * Set disabled state. The component is not interactive and grayed out.
   */
  disabled?: boolean;
 
  /**
   * Pass the HTML attribute `type` to the component.
   * If not specified, the type is always 'button' when rendered as `<button>.
   * @default 'button'
   */
  type?: "submit" | "reset" | "button";
 
  /**
   * Set the loading state and show a spinner.
   */
  busy?: boolean;
 
  /**
   * Callback function to be called when the button is clicked.
   */
  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 
  /**
   * Set a sentiment color/status to convey meaning and important to the action
   */
  sentiment?: "positive" | "warning" | "danger";
 
  /**
   * Set the component to render as different element
   * @default 'button'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};