| 1 | import type * as React from "react";
|
| 2 | import type { ActionProps, Alignment, MaybeElement } from "../../common";
|
| 3 | import type { IconName } from "../icon/icon";
|
| 4 | export interface ButtonSharedProps extends ActionProps<HTMLElement> {
|
| 5 | /**
|
| 6 | * If set to `true`, the button will display in an active state.
|
| 7 | * This is equivalent to setting `className={Classes.ACTIVE}`.
|
| 8 | *
|
| 9 | * @default false
|
| 10 | */
|
| 11 | active?: boolean;
|
| 12 | /**
|
| 13 | * Text alignment within button. By default, icons and text will be centered
|
| 14 | * within the button. Passing `"left"` or `"right"` will align the button
|
| 15 | * text to that side and push `icon` and `rightIcon` to either edge. Passing
|
| 16 | * `"center"` will center the text and icons together.
|
| 17 | *
|
| 18 | * @default Alignment.CENTER
|
| 19 | */
|
| 20 | alignText?: Alignment;
|
| 21 | /** Button contents. */
|
| 22 | children?: React.ReactNode;
|
| 23 | /**
|
| 24 | * If set to `true`, the button text element will hide overflow text that does not fit into a
|
| 25 | * single line and show a trailing ellipsis, similar to the `Text` component.
|
| 26 | *
|
| 27 | * @default false
|
| 28 | */
|
| 29 | ellipsizeText?: boolean;
|
| 30 | /** Whether this button should expand to fill its container. */
|
| 31 | fill?: boolean;
|
| 32 | /** Whether this button should use large styles. */
|
| 33 | large?: boolean;
|
| 34 | /**
|
| 35 | * If set to `true`, the button will display a centered loading spinner instead of its contents
|
| 36 | * and the button will be disabled (_even if_ `disabled={false}`). The width of the button is
|
| 37 | * not affected by the value of this prop.
|
| 38 | *
|
| 39 | * @default false
|
| 40 | */
|
| 41 | loading?: boolean;
|
| 42 | /** Whether this button should use minimal styles. */
|
| 43 | minimal?: boolean;
|
| 44 | /** Whether this button should use outlined styles. */
|
| 45 | outlined?: boolean;
|
| 46 | /** Name of a Blueprint UI icon (or an icon element) to render after the text. */
|
| 47 | rightIcon?: IconName | MaybeElement;
|
| 48 | /** Whether this button should use small styles. */
|
| 49 | small?: boolean;
|
| 50 | /** Class name(s) to apply to the text span element. */
|
| 51 | textClassName?: string;
|
| 52 | /**
|
| 53 | * HTML `type` attribute of button. Accepted values are `"button"`, `"submit"`, and `"reset"`.
|
| 54 | * Note that this prop has no effect on `AnchorButton`; it only affects `Button`.
|
| 55 | *
|
| 56 | * @default "button"
|
| 57 | */
|
| 58 | type?: "submit" | "reset" | "button";
|
| 59 | }
|
| 60 | /**
|
| 61 | * Props interface assignable to both the Button and AnchorButton components.
|
| 62 | *
|
| 63 | * It is useful for the props for the two components to be assignable to each other because the components
|
| 64 | * are so similar and distinguishing between them in their event handlers is usually unnecessary.
|
| 65 | */
|
| 66 | export type ButtonSharedPropsAndAttributes = ButtonSharedProps & React.HTMLAttributes<HTMLElement>;
|
| 67 | export type ButtonProps = ButtonSharedProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>;
|
| 68 | export type AnchorButtonProps = ButtonSharedProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>;
|