@clubmed/trident-ui/molecules/Buttons/Button.d.ts

Shared ClubMed React UI components

import { type ButtonHTMLAttributes, type FunctionComponent, type MouseEventHandler, type ReactNode } from 'react';
import './button.css';
import type { IconicNames, IconicTypes } from '../../atoms/Icons/index.js';
export interface CommonButtonProps {
    /**
     * Button themes defining background color and text/icon color
     */
    theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke';
    /**
     * Is it a text button? An icon button? An arrow button?
     */
    variant?: 'text' | 'textSmall' | 'icon' | 'arrow';
    /**
     * Background Color override
     * Ideally please use ONLY for the "white" and "black" themes
     */
    backgroundOverride?: string;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Button title
     */
    title?: string;
    /**
     * Button contents
     */
    label?: string;
    /**
     * Optional children (you might never use this, please actually try to avoid it)
     */
    children?: ReactNode;
    /**
     * Optional icon name
     */
    icon?: IconicNames;
    /**
     * Force the icon type to be svg, font or default
     */
    iconType?: IconicTypes;
    /**
     * Data test id
     */
    dataTestId?: string;
    /**
     * Group name
     * Used to group buttons together (you might not need this)
     */
    groupName?: string;
}
interface ButtonProps extends CommonButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * Optional click handler
     */
    onClick?: MouseEventHandler<HTMLButtonElement>;
    /**
     * Button tabIndex
     *
     * @default 0
     */
    tabIndex?: number;
    /**
     * Data test id
     */
    dataTestId?: string;
}
export declare const Button: FunctionComponent<ButtonProps>;
export {};