@helpwave/hightide/dist/components/Button.d.mts

helpwave's component and theming library

import * as react_jsx_runtime from 'react/jsx-runtime';
import { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';

type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning' | 'negative';
type OutlineButtonColor = 'primary';
type TextButtonColor = 'negative' | 'neutral';
type ButtonSizes = 'small' | 'medium' | 'large';
/**
 * The shard properties between all button types
 */
type ButtonProps = PropsWithChildren<{
    /**
     * @default 'medium'
     */
    size?: ButtonSizes;
}> & ButtonHTMLAttributes<Element>;
declare const ButtonSizePaddings: Record<ButtonSizes, string>;
type ButtonWithIconsProps = ButtonProps & {
    startIcon?: ReactNode;
    endIcon?: ReactNode;
};
type SolidButtonProps = ButtonWithIconsProps & {
    color?: SolidButtonColor;
};
type OutlineButtonProps = ButtonWithIconsProps & {
    color?: OutlineButtonColor;
};
type TextButtonProps = ButtonWithIconsProps & {
    color?: TextButtonColor;
};
/**
 * A button with a solid background and different sizes
 */
declare const SolidButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: SolidButtonProps) => react_jsx_runtime.JSX.Element;
/**
 * A button with an outline border and different sizes
 */
declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
/**
 * A text that is a button that can have different sizes
 */
declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;

export { type ButtonProps, ButtonSizePaddings, OutlineButton, type OutlineButtonColor, type OutlineButtonProps, SolidButton, type SolidButtonColor, type SolidButtonProps, TextButton, type TextButtonColor, type TextButtonProps };