@greensight/gds/types/components/emotion/Button/index.d.ts

Greensight Design System

import React from 'react';
import { MergeElementProps, SVGRIcon } from '../../../types/Utils';
import { ButtonTheme } from '../../../types/emotion/Button';
export interface ButtonBaseProps {
    /** Button content. */
    children: React.ReactNode;
    /** Theme name from list of themes defined in theme object at `components.Button.themes`. */
    theme?: string;
    /** Size name from list of sizes defined in theme object at `components.Button.sizes`. */
    size?: string;
    /** Block type. Use 100% of parent width. */
    block?: boolean;
    /** Icon. Accepts SVGR icon or custom JSX. */
    Icon?: SVGRIcon;
    /** Place icon after text. */
    iconAfter?: boolean;
    /** Visually hidden text. Keeps text accessible but visually shows only icons. Doesn't make sense without `Icon` prop. */
    hidden?: boolean;
    /** Open link in another browser tab. Additionaly adds `rel="nofollow noopener"`. */
    external?: boolean;
    /** Button theme object for internal testing purposes. Uses in Storybook knobs to play with theme. */
    __theme?: ButtonTheme;
}
export type ButtonProps<P extends React.ElementType = 'button'> = {
    /** Use your own React component for render. Main usage: pass `a` for external links or pass `Link` from `react-router` for routes management. */
    as?: P;
} & MergeElementProps<P, ButtonBaseProps>;
/**
 * Button component.
 *
 * Renders <button /> or <a /> (pass `href`) or any custom element (pass `as`).
 *
 * Define themes and sizes in theme object (`components.Button`) and use them as `theme` / `size` prop values.
 */
export declare const Btn: <T extends React.ElementType = "button">({ children, theme, size, block, Icon, iconAfter, hidden, type, as, external, __theme, css, ...props }: ButtonProps<T>, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export declare const Button: typeof Btn;