@spicy-ui/core/dist/components/Button/Button.d.ts

A themable and extensible React UI library, ready to use out of the box

import * as React from 'react';
import { SxProp } from '../../system';
import { ColorScales } from '../../theme';
import { AsProp, ChildrenProp, LiteralUnion } from '../../types';
export declare type ButtonColors = ColorScales;
export declare type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
export declare type ButtonVariants = 'filled' | 'outlined' | 'ghost' | 'link' | 'unstyled';
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, AsProp, ChildrenProp, SxProp {
    /** Space between the button icon and label. */
    iconSpacing?: string;
    /** Icon shown before the button's label. */
    iconBefore?: React.ReactElement;
    /** Icon shown after the button's label. */
    iconAfter?: React.ReactElement;
    /** If `true`, the button will add the `data-active` attribute. */
    isActive?: boolean;
    /** If `true`, the button will be disabled. */
    isDisabled?: boolean;
    /** If `true`, the button will show a spinner. */
    isLoading?: boolean;
    /** If `true`, the button will take up the full width of its container. */
    isFullWidth?: boolean;
    /** The label to be shown beside the spinner when `isLoading` is `true`. */
    loadingText?: string;
    /** Button `type`. */
    type?: 'submit' | 'reset' | 'button';
    /** Replacement spinner component for when `isLoading` is set to `true` */
    spinner?: React.ReactElement;
    /** Color of the button. */
    color?: LiteralUnion<ButtonColors>;
    /** Size of the button. */
    size?: LiteralUnion<ButtonSizes>;
    /** Variant style of the button. */
    variant?: LiteralUnion<ButtonVariants>;
}
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;