its-just-ui/dist/components/Button/Button.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface ButtonContextValue {
    variant: ButtonVariant;
    size: ButtonSize;
    status: ButtonStatus;
    isDisabled: boolean;
    isLoading: boolean;
    isRequired: boolean;
    hasIcon: boolean;
    iconPosition: 'left' | 'right';
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}
export type ButtonVariant = 'default' | 'filled' | 'outlined' | 'ghost' | 'solid' | 'gradient' | 'glass' | 'neon' | 'link';
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
export type ButtonStatus = 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary';
export type ButtonTransition = 'none' | 'colors' | 'transform' | 'glow' | 'slide' | 'bounce';
export interface ButtonBaseProps {
    variant?: ButtonVariant;
    size?: ButtonSize;
    status?: ButtonStatus;
    disabled?: boolean;
    loading?: boolean;
    required?: boolean;
    interactive?: boolean;
    animated?: boolean;
    animation?: 'pulse' | 'bounce' | 'shake' | 'glow';
    transition?: ButtonTransition;
    transitionDuration?: string;
    label?: string;
    helperText?: string;
    icon?: React.ReactNode;
    iconPosition?: 'left' | 'right';
    loadingText?: string;
    loadingSpinner?: React.ReactNode;
    ariaLabel?: string;
    type?: 'button' | 'submit' | 'reset';
    value?: string;
    name?: string;
    form?: string;
    className?: string;
    style?: React.CSSProperties;
    borderWidth?: string | number;
    borderColor?: string;
    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
    borderRadius?: string | number;
    fontSize?: string | number;
    fontWeight?: string | number;
    fontFamily?: string;
    textColor?: string;
    textAlign?: 'left' | 'center' | 'right';
    backgroundColor?: string;
    color?: string;
    hoverBackgroundColor?: string;
    hoverTextColor?: string;
    activeBackgroundColor?: string;
    activeTextColor?: string;
    scale?: string;
    hoverScale?: string;
    activeScale?: string;
    opacity?: string;
    hoverOpacity?: string;
    activeOpacity?: string;
    transform?: string;
    hoverTransform?: string;
    activeTransform?: string;
    focusRingColor?: string;
    focusRingWidth?: string | number;
    focusRingOffset?: string | number;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    focusTextColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    hoverBoxShadow?: string;
    activeBoxShadow?: string;
    padding?: string | number;
    paddingX?: string | number;
    paddingY?: string | number;
    paddingTop?: string | number;
    paddingRight?: string | number;
    paddingBottom?: string | number;
    paddingLeft?: string | number;
    margin?: string | number;
    marginX?: string | number;
    marginY?: string | number;
    marginTop?: string | number;
    marginRight?: string | number;
    marginBottom?: string | number;
    marginLeft?: string | number;
    width?: string | number;
    height?: string | number;
    minWidth?: string | number;
    minHeight?: string | number;
    maxWidth?: string | number;
    maxHeight?: string | number;
    flex?: string | number;
    flexGrow?: string | number;
    flexShrink?: string | number;
    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
    gap?: string | number;
    display?: 'inline-flex' | 'flex' | 'inline-block' | 'block' | 'none';
    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
    zIndex?: string | number;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
    'aria-required'?: boolean;
    'aria-disabled'?: boolean;
    'aria-pressed'?: boolean;
    'aria-expanded'?: boolean;
    'aria-haspopup'?: boolean;
    role?: string;
    tabIndex?: number;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
    onKeyUp?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
}
export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps>, ButtonBaseProps {
    children?: React.ReactNode;
}
export declare const useButtonContext: () => ButtonContextValue;
export declare const ButtonIcon: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    children: React.ReactNode;
    className?: string;
} & React.RefAttributes<HTMLSpanElement>>>;
export declare const ButtonLabel: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    children: React.ReactNode;
    className?: string;
} & React.RefAttributes<HTMLSpanElement>>>;
export declare const ButtonSpinner: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    className?: string;
} & React.RefAttributes<HTMLDivElement>>>;
interface ButtonComponent extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> {
    Icon: typeof ButtonIcon;
    Label: typeof ButtonLabel;
    Spinner: typeof ButtonSpinner;
}
declare const Button: ButtonComponent;
export { Button };
export default Button;