onecart-ui/dist/src/Button/Button.types.d.ts

OneCart UI: Cross-platform design tokens + React & React Native components

export type ButtonType = "primary" | "outline" | "ghost" | "destructive";
export type ButtonSize = "large" | "small" | "medium";
export type ButtonState = "default" | "hover" | "active" | "disabled";
export interface ButtonProps {
    /** Visible text label (also used as accessible name fallback). */
    label: string;
    /** Visual variant; defaults to `primary`. */
    type?: ButtonType;
    /** Size scale; defaults to `large`. */
    size?: ButtonSize;
    /** Disables interaction and applies disabled styling. */
    disabled?: boolean;
    /** Icon name rendered to the left of label (ignored if `icon` provided). */
    leftIcon?: string;
    /** Icon name rendered to the right of label (ignored if `icon` provided). */
    rightIcon?: string;
    /** Single icon (icon‑only button); when set, label text is visually hidden. */
    icon?: string;
    /** Stretches button to width:100%. */
    fullWidth?: boolean;
    /** Underlines text for `ghost` variant when not disabled (default true). */
    ghostUnderline?: boolean;
    /** Explicit accessible label (overrides fallback to `label`). */
    accessibilityLabel?: string;
    /** Test identifier (data-testid on web). */
    testID?: string;
    /** Additional CSS class name for web implementation only. */
    className?: string;
    /** Style override: React.CSSProperties (web) or RN style object (mobile). */
    style?: React.CSSProperties | Record<string, unknown>;
    /** Web click handler; executes alongside `onPress` if both supplied. */
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    /** Platform‑agnostic press handler (used by mobile; also invoked on web clicks). */
    onPress?: () => void;
    /** Mouse enter hook (web only). */
    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    /** Mouse leave hook (web only). */
    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    /** Mouse down hook (web only). */
    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    /** Mouse up hook (web only). */
    onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}