@hypothesis/frontend-shared/lib/components/buttons.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * An icon-only button
 *
 * @deprecated - Use re-implemented component in the input group
 * @param {IconButtonProps} props
 */
export function IconButton({ className, ...restProps }: IconButtonProps): import("preact").JSX.Element;
/**
 * A labeled button, with or without an icon
 *
 * @deprecated - Use re-implemented component in the input group
 * @param {ButtonBaseProps} props
 */
export function LabeledButton({ children, className, ...restProps }: ButtonBaseProps): import("preact").JSX.Element;
/**
 * A button styled to appear as an HTML link (<a>)
 *
 * @param {ButtonBaseProps} props
 */
export function LinkButton(props: ButtonBaseProps): import("preact").JSX.Element;
export type ButtonProps = {
    buttonRef?: import("preact").Ref<HTMLButtonElement> | undefined;
    /**
     * - Optional CSS class name(s) to use _in addition_
     * to the button component's own clases
     */
    classes?: string | undefined;
    /**
     * - Optional CSS class name that will _replace_
     * the button component's own classes
     */
    className?: string | undefined;
    /**
     * - Name of `SvgIcon` to render in the button
     */
    icon?: string | symbol | undefined;
    /**
     * - Icon positioned to left or to
     * right of button text
     */
    iconPosition?: "left" | "right" | undefined;
    /**
     * - Is the element associated with this button
     * expanded (set `aria-expanded`)
     */
    expanded?: boolean | undefined;
    /**
     * - Use `expanded` prop instead
     */
    "aria-expanded"?: undefined;
    /**
     * - Is this button currently "active?" (set
     * `aria-pressed` or `aria-selected` depending on button `role`)
     */
    pressed?: boolean | undefined;
    /**
     * - Use `pressed` prop instead
     */
    "aria-pressed"?: undefined;
    /**
     * - Relative button size:
     * affects padding
     */
    size?: "small" | "medium" | "large" | undefined;
    /**
     * - Button title; used for `aria-label` attribute
     */
    title?: string | undefined;
    /**
     * - Use `title` prop instead
     */
    "aria-label"?: undefined;
    /**
     * - For styling: element variant
     */
    variant?: "normal" | "primary" | "light" | "dark" | undefined;
};
/**
 * Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited
 * from HTMLElement and conflicts with the _ButtonProps.size prop above. Ignore `icon`
 * because it is typed to `string` only and we need to be able to accept {string|symbol}
 */
export type HTMLButtonElementProps = Omit<import('preact').JSX.HTMLAttributes<HTMLButtonElement>, 'size' | 'icon'>;
/**
 * Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited
 * from HTMLElement and conflicts with the _ButtonProps.size prop above. Ignore `icon`
 * because it is typed to `string` only and we need to be able to accept {string|symbol}
 */
export type ButtonBaseProps = ButtonProps & HTMLButtonElementProps;
export type IconButtonBaseProps = {
    /**
     * - Icon is required for icon buttons
     */
    icon: string | symbol;
    /**
     * - Title is required for icon buttons
     */
    title: string;
    /**
     * - children are not allowed (use LabeledButton instead)
     */
    children?: undefined;
};
export type IconButtonProps = ButtonBaseProps & IconButtonBaseProps;