Split Button

import { SplitButton } from "@lualtek/react-components";
 
export default () => {
  return (
    <SplitButton label="Button">
      <Menu>
        <Menu.Item>Option 1</Menu.Item>
        <Menu.Item>Option 2</Menu.Item>
      </Menu>
    </SplitButton>
  );
};

export type SplitButtonProps = {
  /**
   * 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";
  /**
   * Make the component full width, filling the available space.
   */
  fullWidth?: boolean;
  /**
   * Define the icon to use.
   */
  icon?: IconProps["source"];
  /**
   * 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>.
   */
  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";
  /**
   * The side of the anchor element from which the popover will appear.
   */
  side?: PopoverCOmponentProps["side"];
  /**
   * The offset from the anchor element.
   */
  offset?: PopoverCOmponentProps["offset"];
  /**
   * The preferred alignment against the anchor. May change when collisions occur.
   */
  align?: PopoverCOmponentProps["align"];
};