@clubmed/trident-ui/ui/buttons/Button.type.d.ts

Shared ClubMed React UI components

import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
import { Colors } from '../types/Colors';
export interface ButtonProps {
    color?: Colors;
    /**
     * Optional icon name
     */
    icon?: IconicNames;
    /**
     * Force the icon type to be svg, font or default
     */
    iconType?: IconicTypes;
    iconWidth?: string;
    size?: 'small' | 'medium' | 'large';
    theme?: 'outline' | 'solid';
    variant?: 'circle' | 'pill';
}
type Params = {
    color: ButtonProps['color'];
    size: ButtonProps['size'];
    theme: ButtonProps['theme'];
    variant: ButtonProps['variant'];
};
export declare const BUTTON_COLORS: {
    readonly black: "button-black";
    readonly green: "button-green";
    readonly lavender: "button-lavender";
    readonly lightSand: "button-lightSand";
    readonly marygold: "button-marygold";
    readonly orange: "button-orange";
    readonly red: "button-red";
    readonly saffron: "button-saffron";
    readonly sand: "button-sand";
    readonly sienna: "button-sienna";
    readonly ultramarine: "button-ultramarine";
    readonly verdigris: "button-verdigris";
    readonly wave: "button-wave";
    readonly white: "button-white";
    readonly darkGrey: "button-darkGrey";
    readonly lightGrey: "button-lightGrey";
    readonly current: "button-current";
};
export declare const BUTTON_THEMES: {
    readonly outline: "button-outline";
    readonly solid: "button-solid";
};
export declare const BUTTON_VARIANTS: {
    readonly circle: "button-circle";
    readonly pill: "button-pill";
};
export declare const BUTTON_SIZES: {
    readonly small: "button-small";
    readonly medium: "button-medium";
    readonly large: "button-large";
};
export declare const getButtonClasses: ({ color, size, theme, variant }: Params) => string;
export {};