import { AllowedIcons } from "../../../foundation/index.js"; import { ComponentPropsWithRef, MouseEventHandler } from "react"; export interface ActionChipProps extends ComponentPropsWithRef<"button"> { /** The label of the chip. */ label?: string; /** The function to run when the chip is clicked. */ onClick?: MouseEventHandler; /** Whether the chip is selected or not. */ selected?: boolean; /** The icon to display in the chip. */ icon?: AllowedIcons; /** Loading state */ loading?: { isLoading: boolean; loadingText: string; }; /** Density of the chip. */ density?: "default" | "compact"; } /** * Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially. * * Action chips represent smart or automated actions. Action chips function as though the user asked an assistant to complete the action. Action chips should be shown dynamically and contextually in a UI underneath primary content. * * Action chips could also allow selection of a single chip from a set of options. * In this case action chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus. When used in this way, you should ensure that selecting a single action chip automatically deselects all other chips in the set. **/ export declare const ActionChip: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; //# sourceMappingURL=ActionChip.d.ts.map