@massds/mayflower-react/dist/ButtonWithIcon/index.d.ts

React versions of Mayflower design system UI components

/**
 * ButtonWithIcon module.
 * @module @massds/mayflower-react/ButtonWithIcon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from 'react';
export interface ButtonWithIconProps {
    /** id for the button */
    id?: string;
    /** button or link content rendered in a span */
    children?: React.ReactElement | React.ReactNode;
    /** When populated with a url, this component renders a <a> vs a <button> */
    href?: string;
    onClick?(...args: unknown[]): unknown;
    setButtonRef?: ((...args: unknown[]) => unknown) | {
        current?: React.ReactElement;
    };
    text?: string;
    /** HTML `<button>` 'type' attribute  */
    type?: "submit" | "reset" | "button" | "";
    /** Create a smaller button */
    size?: "" | "small" | "large";
    classes?: string[];
    icon?: React.ReactElement;
    expanded?: boolean;
    capitalized?: boolean;
    /** The aria-label property is used to provide the label to any assistive
     * technologies. This is useful if the text value is not descriptive of the
     * button's functionality. */
    'aria-label'?: string;
    /** Themes correspond to site color scheme i.e. sass variables */
    theme?: "" | "c-primary" | "c-highlight" | "c-gray-dark" | "c-black" | "c-white";
    /** Button usage */
    usage?: "" | "secondary" | "tertiary" | "quaternary" | "quaternary-simple" | "alert";
    /** Whether the button has a popup or not */
    'aria-haspopup'?: boolean;
}
declare const ButtonWithIcon: (props: ButtonWithIconProps) => any;
export default ButtonWithIcon;