@patreon/studio/module/components/Button/types.d.ts

Patreon Studio Design System

import type React from 'react';
import type { BaseProps, ChildrenProps, LoggerProps, StylableProps } from '../../types/component';
import type { BodyTextBundle } from '../../types/type-bundles';
import type { ValueOrResponsive } from '../../utilities/opaque-responsive';
import type { IconComponent, IconProps } from '../Icon/types';
declare type HTMLType = 'button' | 'submit' | 'reset';
declare type Target = '_self' | '_blank' | '_parent' | '_top';
declare type Variant = 'primary' | 'secondary' | 'critical' | 'tertiary' | 'floating' | 'insetBlack' | 'insetWhite';
declare type Size = 'xs' | 'sm' | 'md' | 'lg';
export interface ButtonProps extends React.AriaAttributes, BaseProps, StylableProps, LoggerProps, ChildrenProps {
    /**
     * Applies disabled styling to the button.
     */
    disabled?: boolean;
    /**
     * Adds an Icon on the right. Only a set list of icons are allowed.
     */
    disclosureIcon?: IconComponent;
    /**
     * Render the button w/ 100% width.
     */
    fluid?: ValueOrResponsive<boolean>;
    /**
     * Button link destination. When provided, an `<a>` is rendered in place of `<button>`.
     */
    href?: string;
    /**
     * The icon to to display alongside text in a button
     */
    icon?: IconComponent;
    /**
     * Custom props to send to the icon
     */
    iconProps?: IconProps;
    /**
     * Renders loading spinner in place of the button label.
     */
    isLoading?: boolean;
    /**
     * Callback function for button click.
     */
    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
    /**
     * Button Size. Options are `xs`, `sm`, `md`, and `lg`.
     * @default 'md'
     */
    size?: Size;
    /** Font weight of the button text */
    weight?: BodyTextBundle['weight'];
    /**
     * Provide a `target` attribute if an `href` is provided.
     * See the `target` section of the [MDN <a> docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
     */
    target?: Target;
    /**
     * HTML `type` attribute. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes).
     * @default "button"
     */
    type?: HTMLType;
    /**
     * Render the unfilled version of selected variant.
     */
    unfilled?: boolean;
    /**
     * New prop for design refresh. Specifies button variant background color.
     */
    variant?: Variant;
    /**
     * Specifies border radius for button. Default is `rounded`.
     */
    corners?: 'rounded' | 'pill';
    /**
     * Specifies whether to use default Button padding or none while using only an icon.
     */
    padding?: 'default' | 'none';
    /**
     * Specifies whether to use default Button margin or none.
     * @default center
     */
    textAlign?: 'left' | 'center' | 'right';
}
export {};