Toggle Button

import { ToggleButton } from "@lualtek/react-components";
 
export default () => {
  return <ToggleButton restingIcon="view" pressedIcon="hide" />;
};

export type ToggleButtonProps = {
  /**
   * Set the style of the component.
   * When disabled the style is overwritten.
   */
  kind?: "primary" | "secondary" | "flat";
 
  /**
   * Set the size of the component.
   */
  dimension?: "regular" | "small" | "big";
 
  /**
   * Set disabled state. The component is not interactive and grayed out.
   */
  disabled?: boolean;
 
  /**
   * Set the loading state and show a spinner.
   */
  busy?: boolean;
 
  /**
   * Callback function to be called when the component 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 icon to show when the button is resting.
   */
  restingIcon: IconProps["source"];
 
  /**
   * Set the icon to show when the button is pressed/active.
   */
  pressedIcon?: IconProps["source"];
 
  /**
   * Set the pressed state of the button. If `pressedIcon` is set,
   * the icon will be shown instead of the resting icon.
   * @default false
   */
  pressed?: boolean;
};