@kadconsulting/dry/dist/src/components/Button/ButtonTypes.d.ts

KAD Reusable Component Library

import { ButtonHTMLAttributes, ReactNode } from 'react';
export interface ButtonProps extends ButtonHTMLAttributes<HTMLElement> {
    /** Pass through any other props */
    passProps?: object;
    /** Support for @testing-library/react `screen.getByTestId` */
    'data-testid'?: string;
    /** Button text */
    text?: string;
    /** Icon source URL for the button */
    iconSrc?: string;
    /** Click event handler */
    onClick?: () => void;
    /** Is the button in a loading state */
    isLoading?: boolean;
    /** Is the button in an error state */
    isError?: boolean;
    /** Is the button disabled */
    disabled?: boolean;
    /** Button type for styling */
    buttonType?: 'primary' | 'secondary-grey' | 'secondary' | 'tertiary-grey' | 'tertiary' | 'link' | 'link-grey' | 'danger' | 'ghost-danger' | 'ghost-info' | 'outline-transparent' | 'ghost-text' | 'icon' | 'warning' | 'success' | 'info' | 'light' | 'dark' | 'link' | 'outline-primary' | 'outline-secondary' | 'outline-tertiary' | 'outline-danger' | 'outline-warning' | 'outline-success' | 'outline-info' | 'outline-light' | 'outline-dark' | 'outline-link' | 'ghost-primary' | 'ghost-secondary' | 'ghost-tertiary' | 'ghost-warning' | 'ghost-success' | 'ghost-light' | 'ghost-dark' | 'ghost-link' | 'text-primary' | 'text-secondary' | 'text-tertiary' | 'text-danger' | 'text-warning' | 'text-success' | 'text-info' | 'text-light' | 'text-dark' | 'text-link' | 'text-outline-primary' | 'text-outline-secondary' | 'text-outline-tertiary' | 'text-outline-danger' | 'text-outline-warning' | 'text-outline-success' | 'text-outline-info' | 'text-outline-light' | 'text-outline-dark' | 'text-outline-link' | 'text-ghost-primary' | 'text-ghost-secondary' | 'text-ghost-tertiary' | 'text-ghost-danger' | 'text-ghost-warning' | 'text-ghost-success' | 'text-ghost-info' | 'text-ghost-light' | 'text-ghost-dark' | 'text-ghost-link';
    /** Button size */
    size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl';
    /** Custom icon component */
    icon?: ReactNode;
    /** Should the button take the full width of its container */
    fullWidth?: boolean;
    /** Is the button a submit button */
    submit?: boolean;
    /** Should the button have a blinking effect */
    blink?: boolean;
    /** Should the button have a pulsing effect */
    pulse?: boolean;
    /** Is the button animated */
    animated?: boolean;
    /** Tooltip text */
    tooltip?: string;
    /** Child nodes for the button */
    children?: ReactNode;
    /** Is it a close button */
    closeButton?: boolean;
    /** Is it a dropdown button */
    dropdownButton?: boolean;
    /** Additional CSS class names for the button */
    className?: string;
    /** Is there an icon on the left side of the text */
    iconLeft?: boolean;
    /** Is there an icon on the right side of the text */
    iconRight?: boolean;
    /** Note text (like a tooltip) */
    note?: string;
    /** Class name for the button content wrapper */
    wrapperClassName?: string;
    /** Width of the button */
    width?: string;
    /** Left adornment, typically an icon or text */
    adornmentLeft?: ReactNode;
    /** Right adornment, typically an icon or text */
    adornmentRight?: ReactNode;
    social?: 'google' | 'facebook' | 'apple' | 'twitter' | 'figma' | 'dribbble';
    socialVariant?: 'brand' | 'color' | 'colorWithBrand';
    socialText?: boolean;
    destructive?: boolean;
    textColor?: string;
}