@blueprintjs/core

@blueprintjs/core

Version 5.19.0
Published 8 days ago
6.85 MB
10 dependencies
Apache-2.0 license

Install

npm i @blueprintjs/core

yarn add @blueprintjs/core

pnpm add @blueprintjs/core

Overview

Core styles & components

Index

Variables

variable Alert

const Alert: React.FC<AlertProps>;

Alert component.
See Also
- https://blueprintjs.com/docs/#core/components/alert

variable Alignment

const Alignment: {
    CENTER: 'center';
    END: 'end';
    LEFT: 'left';
    RIGHT: 'right';
    START: 'start';
};

Alignment along the horizontal axis.

variable AnchorButton

const AnchorButton: React.FC<any>;

AnchorButton component.
See Also
- https://blueprintjs.com/docs/#core/components/button

variable Blockquote

const Blockquote: React.FC<any>;

variable Boundary

const Boundary: { START: 'start'; END: 'end' };

Boundary of a one-dimensional interval.

const Breadcrumb: React.FC<BreadcrumbProps>;

Breadcrumb component.
See Also
- https://blueprintjs.com/docs/#core/components/breadcrumbs

variable Button

const Button: React.FC<any>;

Button component.
See Also
- https://blueprintjs.com/docs/#core/components/button

variable ButtonGroup

const ButtonGroup: React.FC<ButtonGroupProps>;

Button group component.
See Also
- https://blueprintjs.com/docs/#core/components/button-group

variable ButtonVariant

const ButtonVariant: {
    readonly MINIMAL: 'minimal';
    readonly OUTLINED: 'outlined';
    readonly SOLID: 'solid';
};

The visual style variant for buttons.

variable Callout

const Callout: React.FC<CalloutProps>;

Callout component.
See Also
- https://blueprintjs.com/docs/#core/components/callout

variable Card

const Card: React.FC<CardProps>;

Card component.
See Also
- https://blueprintjs.com/docs/#core/components/card

variable CardList

const CardList: React.FC<CardListProps>;

variable Checkbox

const Checkbox: React.FC<CheckboxProps>;

Checkbox component.
See Also
- https://blueprintjs.com/docs/#core/components/checkbox

variable CheckboxCard

const CheckboxCard: React.FC<CheckboxCardProps>;

Checkbox Card component.
See Also
- https://blueprintjs.com/docs/#core/components/control-card.checkbox-card

variable Code

const Code: React.FC<any>;

variable CompoundTag

const CompoundTag: React.FC<CompoundTagProps>;

Compound tag component.
See Also
- https://blueprintjs.com/docs/#core/components/compound-tag

variable ContextMenu

const ContextMenu: React.FC<ContextMenuProps>;

Context menu component.
See Also
- https://blueprintjs.com/docs/#core/components/context-menu

variable ContextMenuPopover

const ContextMenuPopover: React.NamedExoticComponent<ContextMenuPopoverProps>;

A floating popover which is positioned at a given target offset inside its parent element container. Used to display context menus. Note that this behaves differently from other popover components like Popover and Tooltip, which wrap their children with interaction handlers -- if you're looking for the whole interaction package, use ContextMenu instead.
See Also
- https://blueprintjs.com/docs/#core/components/context-menu-popover

variable ControlGroup

const ControlGroup: React.FC<ControlGroupProps>;

Control group component.
See Also
- https://blueprintjs.com/docs/#core/components/control-group

variable DialogBody

const DialogBody: React.FC<DialogBodyProps>;

Dialog body component.
See Also
- https://blueprintjs.com/docs/#core/components/dialog.dialog-body-props

variable DialogFooter

const DialogFooter: React.FC<DialogFooterProps>;

Dialog footer component.
See Also
- https://blueprintjs.com/docs/#core/components/dialog.dialog-footer-props

variable DialogStep

const DialogStep: React.FC<DialogStepProps>;

Dialog step component.
See Also
- https://blueprintjs.com/docs/#core/components/dialog.dialogstep

variable DISPLAYNAME_PREFIX

const DISPLAYNAME_PREFIX: string;

variable Divider

const Divider: React.FC<DividerProps>;

Divider component.
See Also
- https://blueprintjs.com/docs/#core/components/divider

variable Elevation

const Elevation: { ZERO: 0; ONE: 1; TWO: 2; THREE: 3; FOUR: 4 };

variable EntityTitle

const EntityTitle: React.FC<EntityTitleProps>;

EntityTitle component.
See Also
- https://blueprintjs.com/docs/#core/components/entity-title

variable Expander

const Expander: React.FC<{}>;

Deprecated
use TabsExpander instead

variable FileInput

const FileInput: { (props: FileInputProps): React.JSX.Element; displayName: string };

File input component.
See Also
- https://blueprintjs.com/docs/#core/components/file-input

variable FocusStyleManager

const FocusStyleManager: {
    alwaysShowFocus: () => boolean | void;
    isActive: () => boolean;
    onlyShowFocusOnTabs: () => boolean | void;
};

variable FormGroup

const FormGroup: React.FC<FormGroupProps>;

Form group component.
See Also
- https://blueprintjs.com/docs/#core/components/form-group

variable H1

const H1: React.FC<any>;

variable H2

const H2: React.FC<any>;

variable H3

const H3: React.FC<any>;

variable H4

const H4: React.FC<any>;

variable H5

const H5: React.FC<any>;

variable H6

const H6: React.FC<any>;

variable HandleInteractionKind

const HandleInteractionKind: { LOCK: 'lock'; PUSH: 'push'; NONE: 'none' };

variable HandleType

const HandleType: { FULL: 'full'; START: 'start'; END: 'end' };

variable HotkeysContext

const HotkeysContext: React.Context<HotkeysContextInstance>;

A React context used to register and deregister hotkeys as components are mounted and unmounted in an application. Users should take care to make sure that only _one_ of these is instantiated and used within an application, especially if using global hotkeys.
You will likely not be using this HotkeysContext directly, except in cases where you need to get a direct handle on an existing context instance for advanced use cases involving nested HotkeysProviders.
For more information, see the [HotkeysProvider documentation](https://blueprintjs.com/docs/#core/context/hotkeys-provider).

variable HotkeysDialog2

const HotkeysDialog2: React.FC<HotkeysDialogProps>;

variable HTMLSelect

const HTMLSelect: React.FC<HTMLSelectProps>;

HTML select component
See Also
- https://blueprintjs.com/docs/#core/components/html-select

variable HTMLTable

const HTMLTable: React.FC<HTMLTableProps>;

HTML table component.
See Also
- https://blueprintjs.com/docs/#core/components/html-table

variable Icon

const Icon: IconComponent;

Icon component.
See Also
- https://blueprintjs.com/docs/#core/components/icon

variable Intent

const Intent: {
    NONE: 'none';
    PRIMARY: 'primary';
    SUCCESS: 'success';
    WARNING: 'warning';
    DANGER: 'danger';
};

The four basic intents.

variable KeyComboTag

const KeyComboTag: React.ComponentType<KeyComboTagProps>;

variable Keys

const Keys: {
    BACKSPACE: 8;
    TAB: 9;
    ENTER: 13;
    SHIFT: 16;
    ESCAPE: 27;
    SPACE: 32;
    ARROW_LEFT: 37;
    ARROW_UP: 38;
    ARROW_RIGHT: 39;
    ARROW_DOWN: 40;
    DELETE: 46;
};

Deprecated
use named keys instead of key codes

variable Label

const Label: React.FC<any>;

const Menu: React.FC<MenuProps>;

Menu component.
See Also
- https://blueprintjs.com/docs/#core/components/menu

variable MenuDivider

const MenuDivider: React.FC<MenuDividerProps>;

Menu divider component.
See Also
- https://blueprintjs.com/docs/#core/components/menu.menu-divider

variable MenuItem

const MenuItem: React.FC<MenuItemProps>;

Menu item component.
See Also
- https://blueprintjs.com/docs/#core/components/menu.menu-item

const Navbar: any;

Navbar component.
See Also
- https://blueprintjs.com/docs/#core/components/navbar

variable NavbarDivider

const NavbarDivider: React.FC<NavbarDividerProps>;

variable NavbarGroup

const NavbarGroup: React.FC<NavbarGroupProps>;

variable NavbarHeading

const NavbarHeading: React.FC<NavbarHeadingProps>;

variable OL

const OL: React.FC<any>;

variable Overlay2

const Overlay2: React.ForwardRefExoticComponent<any>;

Overlay2 component.
See Also
- https://blueprintjs.com/docs/#core/components/overlay2

variable OverlaysContext

const OverlaysContext: React.Context<OverlaysContextState>;

A React context used to interact with the overlay stack in an application. Users should take care to make sure that only _one_ of these is instantiated and used within an application.
You will likely not be using this OverlaysContext directly, it's mostly used internally by the Overlay2 component.
For more information, see the [OverlaysProvider documentation](https://blueprintjs.com/docs/#core/context/overlays-provider).

variable PanelStack2

const PanelStack2: PanelStack2Component;

Panel stack (v2) component.
See Also
- https://blueprintjs.com/docs/#core/components/panel-stack2 T type union of all possible panels in this stack

variable PopoverInteractionKind

const PopoverInteractionKind: {
    CLICK: 'click';
    CLICK_TARGET_ONLY: 'click-target';
    HOVER: 'hover';
    HOVER_TARGET_ONLY: 'hover-target';
};

variable PopoverPosition

const PopoverPosition: {
    AUTO: 'auto';
    AUTO_END: 'auto-end';
    AUTO_START: 'auto-start';
    BOTTOM: 'bottom';
    BOTTOM_LEFT: 'bottom-left';
    BOTTOM_RIGHT: 'bottom-right';
    LEFT: 'left';
    LEFT_BOTTOM: 'left-bottom';
    LEFT_TOP: 'left-top';
    RIGHT: 'right';
    RIGHT_BOTTOM: 'right-bottom';
    RIGHT_TOP: 'right-top';
    TOP: 'top';
    TOP_LEFT: 'top-left';
    TOP_RIGHT: 'top-right';
};

variable PortalContext

const PortalContext: React.Context<PortalContextOptions>;

A React context to set options for all portals in a given subtree. Do not use this PortalContext directly, instead use PortalProvider to set the options.

variable Position

const Position: {
    BOTTOM: 'bottom';
    BOTTOM_LEFT: 'bottom-left';
    BOTTOM_RIGHT: 'bottom-right';
    LEFT: 'left';
    LEFT_BOTTOM: 'left-bottom';
    LEFT_TOP: 'left-top';
    RIGHT: 'right';
    RIGHT_BOTTOM: 'right-bottom';
    RIGHT_TOP: 'right-top';
    TOP: 'top';
    TOP_LEFT: 'top-left';
    TOP_RIGHT: 'top-right';
};

variable Pre

const Pre: React.FC<any>;

variable ProgressBar

const ProgressBar: React.FC<ProgressBarProps>;

Progress bar component.
See Also
- https://blueprintjs.com/docs/#core/components/progress-bar

variable Radio

const Radio: React.FC<ControlProps>;

Radio component.
See Also
- https://blueprintjs.com/docs/#core/components/radio

variable RadioCard

const RadioCard: React.FC<RadioCardProps>;

Radio Card component.
See Also
- https://blueprintjs.com/docs/#core/components/control-card.radio-card

variable RadioGroup

const RadioGroup: React.FC<RadioGroupProps>;

Radio group component.
See Also
- https://blueprintjs.com/docs/#core/components/radio.radiogroup

variable Section

const Section: React.FC<SectionProps>;

Section component.
See Also
- https://blueprintjs.com/docs/#core/components/section

variable SectionCard

const SectionCard: React.FC<SectionCardProps>;

Section card component.
See Also
- https://blueprintjs.com/docs/#core/components/section.section-card

variable SegmentedControl

const SegmentedControl: React.FC<SegmentedControlProps>;

Segmented control component.
See Also
- https://blueprintjs.com/docs/#core/components/segmented-control

variable Size

const Size: {
    readonly SMALL: 'small';
    readonly MEDIUM: 'medium';
    readonly LARGE: 'large';
};

The rendering size of a component.

variable Spinner

const Spinner: React.FC<SpinnerProps<HTMLElement>>;

Spinner component.
See Also
- https://blueprintjs.com/docs/#core/components/spinner

variable Switch

const Switch: React.FC<SwitchProps>;

Switch component.
See Also
- https://blueprintjs.com/docs/#core/components/switch

variable SwitchCard

const SwitchCard: React.FC<SwitchCardProps>;

Switch Card component.
See Also
- https://blueprintjs.com/docs/#core/components/control-card.switch-card

variable TabsExpander

const TabsExpander: React.FC;

Component that may be inserted between any two children of <Tabs> to right-align all subsequent children.

variable Tag

const Tag: React.FC<TagProps>;

Tag component.
See Also
- https://blueprintjs.com/docs/#core/components/tag

variable Text

const Text: React.FC<TextProps>;

Text component.
See Also
- https://blueprintjs.com/docs/#core/components/text

variable TextAlignment

const TextAlignment: { CENTER: 'center'; END: 'end'; START: 'start' };

variable Toast2

const Toast2: React.ForwardRefExoticComponent<any>;

Toast2 component.
Compared to the deprecated Toast component, this is a function component which forwards DOM refs and is thus compatible with Overlay2.
See Also
- https://blueprintjs.com/docs/#core/components/toast2

variable Toaster

const Toaster: { create: typeof deprecatedToasterCreate };

variable ToasterInstance

const ToasterInstance: { create: typeof deprecatedToasterCreate };

variable UL

const UL: React.FC<any>;

variable useIsomorphicLayoutEffect

const useIsomorphicLayoutEffect: any;

Returns
the appropriate React layout effect hook for the current environment (server or client).

Functions

function BlueprintProvider

BlueprintProvider: ({
    children,
    hotkeysProviderValue,
    ...props
}: BlueprintProviderProps) => React.JSX.Element;

Composite Blueprint context provider which enables & manages various global behaviors of Blueprint applications.
See Also
- https://blueprintjs.com/docs/#core/context/blueprint-provider

function comboMatches

comboMatches: (a: KeyCombo, b: KeyCombo) => boolean;

function ContextMenuTargetLegacy

ContextMenuTargetLegacy: <
    T extends Constructor<ContextMenuTargetLegacyComponent>
>(
    WrappedComponent: T
) => {
    new (...args: any[]): {
        render():
            | React.ReactElement<any, string | React.JSXElementConstructor<any>>
            | null
            | undefined;
        renderContextMenu: (
            e: React.MouseEvent<HTMLElement, MouseEvent>
        ) => React.JSX.Element | undefined;
        onContextMenuClose?: (() => void) | undefined;
        context: unknown;
        setState<K extends never>(
            state:
                | {}
                | ((
                      prevState: Readonly<{}>,
                      props: Readonly<{}>
                  ) => {} | Pick<{}, K>)
                | Pick<{}, K>,
            callback?: (() => void) | undefined
        ): void;
        forceUpdate(callback?: (() => void) | undefined): void;
        readonly props: Readonly<{}>;
        state: Readonly<{}>;
        refs: { [key: string]: React.ReactInstance };
        componentDidMount?(): void;
        shouldComponentUpdate?(
            nextProps: Readonly<{}>,
            nextState: Readonly<{}>,
            nextContext: any
        ): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
        getSnapshotBeforeUpdate?(
            prevProps: Readonly<{}>,
            prevState: Readonly<{}>
        ): any;
        componentDidUpdate?(
            prevProps: Readonly<{}>,
            prevState: Readonly<{}>,
            snapshot?: any
        ): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
        UNSAFE_componentWillReceiveProps?(
            nextProps: Readonly<{}>,
            nextContext: any
        ): void;
        componentWillUpdate?(
            nextProps: Readonly<{}>,
            nextState: Readonly<{}>,
            nextContext: any
        ): void;
        UNSAFE_componentWillUpdate?(
            nextProps: Readonly<{}>,
            nextState: Readonly<{}>,
            nextContext: any
        ): void;
    };
    displayName: string;
} & T;

ContextMenuTarget decorator.
See Also
- https://blueprintjs.com/docs/#core/components/context-menu.decorator-usage
Deprecated
use ContextMenu2

function getKeyCombo

getKeyCombo: (e: KeyboardEvent) => KeyCombo;

Determines the key combo object from the given keyboard event. A key combo includes zero or more modifiers (represented by a bitmask) and one physical key. For most keys, we prefer dealing with the code property of the event, since this is not altered by keyboard layout or the state of modifier keys. Fall back to using the key property.
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

function getKeyComboString

getKeyComboString: (e: KeyboardEvent) => string;

Interprets a keyboard event as a valid KeyComboTag combo prop string value.
Note that this function is only used in the docs example and tests; it is not used by useHotkeys() or any Blueprint consumers that we are currently aware of.

function getRef

getRef: <T>(ref: T | React.RefObject<T> | null) => T | null;

function hideContextMenu

hideContextMenu: (options?: DOMMountOptions<ContextMenuPopoverProps>) => void;

Hide a context menu that was created using showContextMenu().
Note that this API relies on global state in the @blueprintjs/core package, and should be used with caution.
See Also
- https://blueprintjs.com/docs/#core/components/context-menu-popover.imperative-api

function hideHotkeysDialog

hideHotkeysDialog: () => void;

Deprecated
use HotkeysProvider

function hideHotkeysDialogAfterDelay

hideHotkeysDialogAfterDelay: () => void;

Use this function instead of hideHotkeysDialog if you need to ensure that all hotkey listeners have time to execute with the dialog in a consistent open state. This can avoid flickering the dialog between open and closed states as successive listeners fire.
Deprecated
use HotkeysProvider

function HotkeysProvider

HotkeysProvider: ({
    children,
    dialogProps,
    renderDialog,
    value,
}: React.PropsWithChildren<HotkeysProviderProps>) => React.JSX.Element;

Hotkeys context provider, necessary for the useHotkeys hook.
See Also
- https://blueprintjs.com/docs/#core/context/hotkeys-provider

function HotkeysTarget

HotkeysTarget: <T extends Constructor<HotkeysTargetLegacyComponent>>(
    WrappedComponent: T
) => {
    new (...args: any[]): {
        globalHotkeysEvents: HotkeysEvents;
        localHotkeysEvents: HotkeysEvents;
        componentDidMount(): void;
        componentWillUnmount(): void;
        render(): React.JSX.Element;
        renderHotkeys: () => React.ReactElement<
            HotkeysProps,
            string | React.JSXElementConstructor<any>
        >;
        context: unknown;
        setState<K extends never>(
            state:
                | {}
                | ((
                      prevState: Readonly<{}>,
                      props: Readonly<{}>
                  ) => {} | Pick<{}, K>)
                | Pick<{}, K>,
            callback?: (() => void) | undefined
        ): void;
        forceUpdate(callback?: (() => void) | undefined): void;
        readonly props: Readonly<{}>;
        state: Readonly<{}>;
        refs: { [key: string]: React.ReactInstance };
        shouldComponentUpdate?(
            nextProps: Readonly<{}>,
            nextState: Readonly<{}>,
            nextContext: any
        ): boolean;
        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
        getSnapshotBeforeUpdate?(
            prevProps: Readonly<{}>,
            prevState: Readonly<{}>
        ): any;
        componentDidUpdate?(
            prevProps: Readonly<{}>,
            prevState: Readonly<{}>,
            snapshot?: any
        ): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
        UNSAFE_componentWillReceiveProps?(
            nextProps: Readonly<{}>,
            nextContext: any
        ): void;
        componentWillUpdate?(
            nextProps: Readonly<{}>,
            nextState: Readonly<{}>,
            nextContext: any
        ): void;
        UNSAFE_componentWillUpdate?(
            nextProps: Readonly<{}>,
            nextState: Readonly<{}>,
            nextContext: any
        ): void;
    };
    displayName: string;
} & T;

Deprecated
use useHotkeys hook or <HotkeysTarget2> component

function HotkeysTarget2

HotkeysTarget2: ({
    children,
    hotkeys,
    options,
}: HotkeysTarget2Props) => React.JSX.Element;

Utility component which allows consumers to use the new useHotkeys hook inside React component classes. The implementation simply passes through to the hook.

function isHotkeysDialogShowing

isHotkeysDialogShowing: () => boolean;

Deprecated
use HotkeysProvider

function isRefCallback

isRefCallback: <T>(
    value: React.Ref<T> | undefined
) => value is React.RefCallback<T>;

function isRefObject

isRefObject: <T>(value: React.Ref<T> | undefined) => value is React.RefObject<T>;

function mergeRefs

mergeRefs: <T>(...refs: Array<React.Ref<T> | undefined>) => React.RefCallback<T>;

Utility for merging refs into one singular callback ref. If using in a functional component, would recomend using useMemo to preserve function identity.

function OverlaysProvider

OverlaysProvider: ({ children }: OverlaysProviderProps) => React.JSX.Element;

Overlays context provider, necessary for the useOverlayStack hook.
See Also
- https://blueprintjs.com/docs/#core/context/overlays-provider

function parseKeyCombo

parseKeyCombo: (combo: string) => KeyCombo;

Converts a key combo string into a key combo object. Key combos include zero or more modifier keys, such as shift or alt, and exactly one action key, such as A, enter, or left.
For action keys that require a shift, e.g. @ or |, we inlude the necessary shift modifier and automatically convert the action key to the unshifted version. For example, @ is equivalent to shift+2.

function Portal

Portal: typeof Portal;

Portal component.
This component detaches its contents and re-attaches them to document.body. Use it when you need to circumvent DOM z-stacking (for dialogs, popovers, etc.). Any class names passed to this element will be propagated to the new container element on document.body.
Portal supports both the newer React context API and the legacy context API. Support for the legacy context API will be removed in Blueprint v6.0.
See Also
- https://blueprintjs.com/docs/#core/components/portal

function PortalProvider

PortalProvider: ({
    children,
    portalClassName,
    portalContainer,
}: React.PropsWithChildren<PortalContextOptions>) => React.JSX.Element;

Portal context provider.
See Also
- https://blueprintjs.com/docs/#core/context/portal-provider

function refHandler

refHandler: <T extends HTMLElement, K extends string>(
    refTargetParent: { [k in K]: T },
    refTargetKey: K,
    refProp?: React.Ref<T> | undefined
) => React.RefCallback<T>;

Creates a ref handler which assigns the ref returned by React for a mounted component to a field on the target object. The target object is usually a component class.
If provided, it will also update the given refProp with the value of the ref.

function removeNonHTMLProps

removeNonHTMLProps: (
    props: { [key: string]: any },
    invalidProps?: string[],
    shouldMerge?: boolean
) => { [key: string]: any };

Typically applied to HTMLElements to filter out disallowed props. When applied to a Component, can filter props from being passed down to the children. Can also filter by a combined list of supplied prop keys and the denylist (only appropriate for HTMLElements).
Parameter props
The original props object to filter down.
Parameter invalidProps
If supplied, overwrites the default denylist.
Parameter shouldMerge
If true, will merge supplied invalidProps and denylist together.

function setHotkeysDialogProps

setHotkeysDialogProps: (props: Partial<HotkeysDialogProps>) => void;

Deprecated
use HotkeysProvider

function setRef

setRef: <T>(refTarget: React.Ref<T> | undefined, ref: T | null) => void;

Assign the given ref to a target, either a React ref object or a callback which takes the ref as its first argument.

function showContextMenu

showContextMenu: (
    props: Omit<ContextMenuPopoverProps, 'isOpen'>,
    options?: DOMMountOptions<ContextMenuPopoverProps> | ShowContextMenuOptions
) => void;

Show a context menu at a particular offset from the top-left corner of the document. The menu will appear below-right of this point and will flip to below-left if there is not enough room onscreen. Additional props like onClose, isDarkTheme, etc. can be forwarded to the <ContextMenuPopover>.
Context menus created with this API will automatically close when a user clicks outside the popover. You may force them to close by using hideContextMenu().
Note that this API relies on global state in the @blueprintjs/core package, and should be used with caution, especially if your build system allows multiple copies of Blueprint libraries to be bundled into an application at once.
Alternative APIs to consider which do not have the limitations of global state: - <ContextMenu> - <ContextMenuPopover>
See Also
- https://blueprintjs.com/docs/#core/components/context-menu-popover.imperative-api

function showHotkeysDialog

showHotkeysDialog: (hotkeys: HotkeyProps[]) => void;

Deprecated
use HotkeysProvider

function useAsyncControllableValue

useAsyncControllableValue: <E extends HTMLInputElement | HTMLTextAreaElement>(
    props: UseAsyncControllableValueProps<E>
) => {
    onChange: React.ChangeEventHandler<E>;
    onCompositionEnd: React.CompositionEventHandler<E>;
    onCompositionStart: React.CompositionEventHandler<E>;
    value: string | number | readonly string[] | undefined;
};

A hook to workaround the following [React bug](https://github.com/facebook/react/issues/3926). This bug is reproduced when an input receives CompositionEvents (for example, through IME composition) and has its value prop updated asychronously. This might happen if a component chooses to do async validation of a value returned by the input's onChange callback.

function useHotkeys

useHotkeys: (
    keys: readonly HotkeyConfig[],
    options?: UseHotkeysOptions
) => UseHotkeysReturnValue;

React hook to register global and local hotkeys for a component.
Parameter keys
list of hotkeys to configure
Parameter options
hook options
See Also
- https://blueprintjs.com/docs/#core/hooks/use-hotkeys

function useOverlayStack

useOverlayStack: () => UseOverlayStackReturnValue;

React hook to interact with the global overlay stack.
See Also
- https://blueprintjs.com/docs/#core/hooks/use-overlay-stack

function usePrevious

usePrevious: <T>(value: T) => T | undefined;

React hook which tracks the previous state of a given value.

Classes

class AbstractComponent

abstract class AbstractComponent<P, S = {}, SS = {}> extends React.Component<
    P,
    S,
    SS
> {}

An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.

constructor

constructor(props: {});

property cancelAnimationFrames

cancelAnimationFrames: () => void;

Clear all known animation frame requests.

property clearTimeouts

clearTimeouts: () => void;

Clear all known timeouts.

property componentWillMount

componentWillMount: never;

property componentWillReceiveProps

componentWillReceiveProps: never;

property componentWillUpdate

componentWillUpdate: never;

property displayName

protected displayName: never;

Component displayName should be public static. This property exists to prevent incorrect usage.

property getDerivedStateFromProps

getDerivedStateFromProps: never;

method componentDidUpdate

componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method requestAnimationFrame

requestAnimationFrame: (callback: () => void) => () => void;

Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.

method setTimeout

setTimeout: (callback: () => void, timeout?: number) => () => void;

Set a timeout and remember its ID. All stored timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.

method validateProps

protected validateProps: (_props: P) => void;

Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.

class AbstractComponent2

abstract class AbstractComponent<P, S = {}, SS = {}> extends React.Component<
    P,
    S,
    SS
> {}

An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.

constructor

constructor(props: {});

property cancelAnimationFrames

cancelAnimationFrames: () => void;

Clear all known animation frame requests.

property clearTimeouts

clearTimeouts: () => void;

Clear all known timeouts.

property componentWillMount

componentWillMount: never;

property componentWillReceiveProps

componentWillReceiveProps: never;

property componentWillUpdate

componentWillUpdate: never;

property displayName

protected displayName: never;

Component displayName should be public static. This property exists to prevent incorrect usage.

property getDerivedStateFromProps

getDerivedStateFromProps: never;

method componentDidUpdate

componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method requestAnimationFrame

requestAnimationFrame: (callback: () => void) => () => void;

Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.

method setTimeout

setTimeout: (callback: () => void, timeout?: number) => () => void;

Set a timeout and remember its ID. All stored timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.

method validateProps

protected validateProps: (_props: P) => void;

Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.

class AbstractPureComponent

abstract class AbstractPureComponent<P, S = {}, SS = {}> extends React.PureComponent<
    P,
    S,
    SS
> {}

An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.

constructor

constructor(props: {});

property cancelAnimationFrames

cancelAnimationFrames: () => void;

Clear all known animation frame requests.

property clearTimeouts

clearTimeouts: () => void;

Clear all known timeouts.

property componentWillMount

componentWillMount: never;

property componentWillReceiveProps

componentWillReceiveProps: never;

property componentWillUpdate

componentWillUpdate: never;

property displayName

protected displayName: never;

Component displayName should be public static. This property exists to prevent incorrect usage.

property getDerivedStateFromProps

getDerivedStateFromProps: never;

method componentDidUpdate

componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method requestAnimationFrame

requestAnimationFrame: (callback: () => void) => () => void;

Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.

method setTimeout

setTimeout: (callback: () => void, timeout?: number) => () => void;

Set a timeout and remember its ID. All pending timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.

method validateProps

protected validateProps: (_props: P) => void;

Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.

class AbstractPureComponent2

abstract class AbstractPureComponent<P, S = {}, SS = {}> extends React.PureComponent<
    P,
    S,
    SS
> {}

An abstract component that Blueprint components can extend in order to add some common functionality like runtime props validation.

constructor

constructor(props: {});

property cancelAnimationFrames

cancelAnimationFrames: () => void;

Clear all known animation frame requests.

property clearTimeouts

clearTimeouts: () => void;

Clear all known timeouts.

property componentWillMount

componentWillMount: never;

property componentWillReceiveProps

componentWillReceiveProps: never;

property componentWillUpdate

componentWillUpdate: never;

property displayName

protected displayName: never;

Component displayName should be public static. This property exists to prevent incorrect usage.

property getDerivedStateFromProps

getDerivedStateFromProps: never;

method componentDidUpdate

componentDidUpdate: (_prevProps: P, _prevState: S, _snapshot?: SS) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method requestAnimationFrame

requestAnimationFrame: (callback: () => void) => () => void;

Request an animation frame and remember its ID. All pending requests will be canceled when component unmounts.
Returns
a "cancel" function that will cancel the request when invoked.

method setTimeout

setTimeout: (callback: () => void, timeout?: number) => () => void;

Set a timeout and remember its ID. All pending timeouts will be cleared when component unmounts.
Returns
a "cancel" function that will clear timeout when invoked.

method validateProps

protected validateProps: (_props: P) => void;

Ensures that the props specified for a component are valid. Implementations should check that props are valid and usually throw an Error if they are not. Implementations should not duplicate checks that the type system already guarantees.
This method should be used instead of React's [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature. Like propTypes, these runtime checks run only in development mode.

class Breadcrumbs extends AbstractPureComponent<BreadcrumbsProps> {}

Breadcrumbs component.
See Also
- https://blueprintjs.com/docs/#core/components/breadcrumbs

static defaultProps: Partial<BreadcrumbsProps>;

render: () => React.JSX.Element;

class Collapse

class Collapse extends AbstractPureComponent<CollapseProps, CollapseState> {}

Collapse component.
See Also
- https://blueprintjs.com/docs/#core/components/collapse

property defaultProps

static defaultProps: Partial<CollapseProps>;

property displayName

static displayName: string;

property state

state: CollapseState;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    props: CollapseProps,
    state: CollapseState
) =>
    | { animationState: AnimationStates; height?: undefined }
    | { animationState: AnimationStates; height: string }
    | null;

method render

render: () => React.ReactElement<any, any>;

class Dialog

class Dialog extends AbstractPureComponent<DialogProps> {}

Dialog component.
See Also
- https://blueprintjs.com/docs/#core/components/dialog

constructor

constructor(props: DialogProps);

property defaultProps

static defaultProps: DialogProps;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (props: DialogProps) => void;

class Drawer

class Drawer extends AbstractPureComponent<DrawerProps> {}

property defaultProps

static defaultProps: DrawerProps;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (props: DrawerProps) => void;

class EditableText

class EditableText extends AbstractPureComponent<
    EditableTextProps,
    EditableTextState
> {}

EditableText component.
See Also
- https://blueprintjs.com/docs/#core/components/editable-text

constructor

constructor(props: EditableTextProps);

property cancelEditing

cancelEditing: () => void;

property defaultProps

static defaultProps: EditableTextProps;

property displayName

static displayName: string;

property toggleEditing

toggleEditing: () => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: EditableTextProps,
    prevState: EditableTextState
) => void;

method render

render: () => React.JSX.Element;

class Hotkey

class Hotkey extends AbstractPureComponent<HotkeyProps> {}

Hotkey component used to display a hotkey in the HotkeysDialog. Should not be used by consumers directly.

property defaultProps

static defaultProps: {
    allowInInput: boolean;
    disabled: boolean;
    global: boolean;
    preventDefault: boolean;
    stopPropagation: boolean;
};

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (props: HotkeyProps) => void;

class Hotkeys

class Hotkeys extends AbstractPureComponent<HotkeysProps> {}

Hotkeys component used to display a list of hotkeys in the HotkeysDialog. Should not be used by consumers directly.

property defaultProps

static defaultProps: { tabIndex: number };

property displayName

static displayName: string;

method render

render: () => React.JSX.Element | null;

method validateProps

protected validateProps: (
    props: HotkeysProps & { children: React.ReactNode }
) => void;

class InputGroup

class InputGroup extends AbstractPureComponent<InputGroupProps, InputGroupState> {}

Input group component.
See Also
- https://blueprintjs.com/docs/#core/components/input-group

property displayName

static displayName: string;

property state

state: InputGroupState;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: InputGroupProps) => void;

method render

render: () => React.ReactElement<{ className: string }, any>;

method validateProps

protected validateProps: (props: InputGroupProps) => void;

class MultiSlider

class MultiSlider extends AbstractPureComponent<MultiSliderProps, SliderState> {}

Multi slider component.
See Also
- https://blueprintjs.com/docs/#core/components/sliders.multi-slider

property defaultProps

static defaultProps: MultiSliderProps;

property defaultSliderProps

static defaultSliderProps: SliderBaseProps;

property displayName

static displayName: string;

property Handle

static Handle: React.FC<HandleProps>;

property state

state: SliderState;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: MultiSliderProps,
    prevState: SliderState
) => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (props: MultiSliderProps) => {
    labelPrecision: number;
};

method getSnapshotBeforeUpdate

getSnapshotBeforeUpdate: (prevProps: MultiSliderProps) => null;

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (
    props: React.PropsWithChildren<MultiSliderProps>
) => void;

class MultistepDialog

class MultistepDialog extends AbstractPureComponent<
    MultistepDialogProps,
    MultistepDialogState
> {}

Multi-step dialog component.
See Also
- https://blueprintjs.com/docs/#core/components/dialog.multistep-dialog

property defaultProps

static defaultProps: Partial<MultistepDialogProps>;

property displayName

static displayName: string;

property state

state: MultistepDialogState;

method componentDidUpdate

componentDidUpdate: (prevProps: MultistepDialogProps) => void;

method render

render: () => React.JSX.Element;

class NonIdealState

class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {}

Non-ideal state component.
See Also
- https://blueprintjs.com/docs/#core/components/non-ideal-state

property defaultProps

static defaultProps: Partial<NonIdealStateProps>;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

class NumericInput

class NumericInput extends AbstractPureComponent<
    Omit<HTMLInputProps, 'size'> & NumericInputProps,
    NumericInputState
> {}

Numeric input component.
See Also
- https://blueprintjs.com/docs/#core/components/numeric-input

property defaultProps

static defaultProps: NumericInputProps;

property displayName

static displayName: string;

property inputElement

inputElement: HTMLInputElement;

property state

state: NumericInputState;

property VALUE_EMPTY

static VALUE_EMPTY: string;

property VALUE_ZERO

static VALUE_ZERO: string;

method componentDidUpdate

componentDidUpdate: (
    prevProps: NumericInputProps,
    prevState: NumericInputState
) => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    props: NumericInputProps,
    state: NumericInputState
) => {
    stepMaxPrecision: number;
    value: string;
    prevMaxProp: number | undefined;
    prevMinProp: number | undefined;
};

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (nextProps: HTMLInputProps & NumericInputProps) => void;

class OverflowList

class OverflowList<T> extends React.Component<
    OverflowListProps<T>,
    OverflowListState<T>
> {}

Overflow list component.
See Also
- https://blueprintjs.com/docs/#core/components/overflow-list

property defaultProps

static defaultProps: Partial<OverflowListProps<any>>;

property displayName

static displayName: string;

property state

state: OverflowListState<T>;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: OverflowListProps<T>,
    prevState: OverflowListState<T>
) => void;

method ofType

static ofType: <U>() => new (props: OverflowListProps<U>) => OverflowList<U>;

method render

render: () => React.JSX.Element;

method shouldComponentUpdate

shouldComponentUpdate: (
    nextProps: OverflowListProps<T>,
    nextState: OverflowListState<T>
) => boolean;

class Overlay

class Overlay extends AbstractPureComponent<OverlayProps, OverlayState> {}

Overlay component.
See Also
- https://blueprintjs.com/docs/#core/components/overlay
Deprecated
use Overlay2 instead

property containerElement

containerElement: React.RefObject<HTMLDivElement>;

Ref for container element, containing all children and the backdrop

property defaultProps

static defaultProps: OverlayProps;

property displayName

static displayName: string;

property state

state: OverlayState;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: OverlayProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: ({
    isOpen: hasEverOpened,
}: OverlayProps) => { hasEverOpened: true } | null;

method render

render: () => React.JSX.Element | null;

class OverlayToaster

class OverlayToaster
    extends AbstractPureComponent<OverlayToasterProps, OverlayToasterState>
    implements Toaster {}

OverlayToaster component.
See Also
- https://blueprintjs.com/docs/#core/components/toast

property defaultProps

static defaultProps: OverlayToasterProps;

property displayName

static displayName: string;

property state

state: OverlayToasterState;

method clear

clear: () => void;

method create

static create: (props?: OverlayToasterProps, container?: HTMLElement) => Toaster;

Create a new Toaster instance that can be shared around your application. The Toaster will be rendered into a new element appended to the given container.

method createAsync

static createAsync: (
    props?: OverlayToasterProps,
    options?: OverlayToasterCreateOptions
) => Promise<Toaster>;

Similar to OverlayToaster.create, but returns a Promise to a Toaster instance after it's rendered and mounted to the DOM.
This API will replace the synchronous OverlayToaster.create in a future major version of Blueprint to reflect React 18+'s new asynchronous rendering API.

method dismiss

dismiss: (key: string, timeoutExpired?: boolean) => void;

method getToasts

getToasts: () => ToastOptions[];

method render

render: () => React.JSX.Element;

method show

show: (props: ToastProps, key?: string) => string;

method validateProps

protected validateProps: ({ maxToasts }: OverlayToasterProps) => void;

class PanelStack

class PanelStack extends AbstractPureComponent<PanelStackProps, PanelStackState> {}

Panel stack component.
See Also
- https://blueprintjs.com/docs/#core/components/panel-stack
Deprecated
use PanelStack2<T>

property state

state: PanelStackState;

method componentDidUpdate

componentDidUpdate: (
    prevProps: PanelStackProps,
    prevState: PanelStackState
) => void;

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (props: PanelStackProps) => void;

class Popover<
    T extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps
> extends AbstractPureComponent<PopoverProps<T>, PopoverState> {}

Popover component, used to display a floating UI next to and tethered to a target element.
T target element props interface. Consumers wishing to stay in sync with Blueprint's default target HTML props interface should use the DefaultPopoverTargetHTMLProps type (although this is already the default type for this type param).
See Also
- https://blueprintjs.com/docs/#core/components/popover

property defaultProps

static defaultProps: PopoverProps<React.HTMLProps<HTMLElement>>;

property displayName

static displayName: string;

property popoverElement

popoverElement: HTMLElement;

DOM element that contains the popover. When usePortal={true}, this element will be portaled outside the usual DOM flow, so this reference can be very useful for testing.
for testing
Modifiers
- @public

property reposition

reposition: () => Promise<Partial<PopperState> | null> | undefined;

Instance method to instruct the Popover to recompute its position.
This method should only be used if you are updating the target in a way that does not cause it to re-render, such as changing its _position_ without changing its _size_ (since Popover already repositions when it detects a resize).

property state

state: PopoverState;

property targetRef

targetRef: React.RefObject<HTMLElement>;

Target DOM element ref.
N.B. this must be a ref object since we pass it to <ResizeSensor>, which needs to know about the target DOM element in order to observe its dimensions.
for testing
Modifiers
- @public

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (props: PopoverProps<T>, state: PopoverState) => void;

method render

render: () => React.JSX.Element | null;

method validateProps

protected validateProps: (props: PopoverProps<T>) => void;

class RangeSlider

class RangeSlider extends AbstractPureComponent<RangeSliderProps> {}

Range slider component.
See Also
- https://blueprintjs.com/docs/#core/components/sliders.range-slider

property defaultProps

static defaultProps: RangeSliderProps;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

method validateProps

protected validateProps: (props: RangeSliderProps) => void;

class ResizeSensor

class ResizeSensor extends AbstractPureComponent<ResizeSensorProps> {}

Resize sensor component.
It requires a single DOM element child and will error otherwise.
See Also
- https://blueprintjs.com/docs/#core/components/resize-sensor

property displayName

static displayName: string;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: ResizeSensorProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => React.ReactNode;

class Slider

class Slider extends AbstractPureComponent<SliderProps> {}

Slider component.
See Also
- https://blueprintjs.com/docs/#core/components/sliders.slider

property defaultProps

static defaultProps: SliderProps;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

class Tab

class Tab extends AbstractPureComponent<TabProps> {}

Tab component.
See Also
- https://blueprintjs.com/docs/#core/components/tabs.tab

property defaultProps

static defaultProps: Partial<TabProps>;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

class TabPanel

class TabPanel extends AbstractPureComponent<TabPanelProps> {}

Wraps the passed panel.

method render

render: () => React.JSX.Element | undefined;

class Tabs

class Tabs extends AbstractPureComponent<TabsProps, TabsState> {}

Tabs component.
See Also
- https://blueprintjs.com/docs/#core/components/tabs

constructor

constructor(props: TabsProps);

property defaultProps

static defaultProps: Partial<TabsProps>;

property displayName

static displayName: string;

property Expander

static Expander: React.FC<{}>;

Insert a TabsExpander between any two children to right-align all subsequent children.
Deprecated
use TabsExpander

property Tab

static Tab: typeof Tab;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: TabsProps, prevState: TabsState) => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: ({
    selectedTabId,
}: TabsProps) => { selectedTabId: TabId } | null;

method render

render: () => React.JSX.Element;

class TagInput

class TagInput extends AbstractPureComponent<TagInputProps, TagInputState> {}

Tag input component.
See Also
- https://blueprintjs.com/docs/#core/components/tag-input

property defaultProps

static defaultProps: Partial<TagInputProps>;

property displayName

static displayName: string;

property inputElement

inputElement: HTMLInputElement;

property state

state: TagInputState;

method componentDidUpdate

componentDidUpdate: (prevProps: TagInputProps) => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    props: Readonly<TagInputProps>,
    state: Readonly<TagInputState>
) => Partial<TagInputState> | null;

method render

render: () => React.JSX.Element;

class TextArea

class TextArea extends AbstractPureComponent<TextAreaProps, TextAreaState> {}

Text area component.
See Also
- https://blueprintjs.com/docs/#core/components/text-area

property defaultProps

static defaultProps: TextAreaProps;

property displayName

static displayName: string;

property state

state: TextAreaState;

property textareaElement

textareaElement: HTMLTextAreaElement;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: TextAreaProps) => void;

method render

render: () => React.JSX.Element;

class Toast

class Toast extends AbstractPureComponent<ToastProps> {}

Toast component.
See Also
- https://blueprintjs.com/docs/#core/components/toast
Deprecated
use Toast2 instead, which forwards DOM refs and is thus compatible with Overlay2.

property defaultProps

static defaultProps: ToastProps;

property displayName

static displayName: string;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: ToastProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => React.JSX.Element;

class Tooltip<
    T extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps
> extends AbstractPureComponent<TooltipProps<T>> {}

Tooltip component.
See Also
- https://blueprintjs.com/docs/#core/components/tooltip

property defaultProps

static defaultProps: Partial<TooltipProps<React.HTMLProps<HTMLElement>>>;

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

method reposition

reposition: () => void;

class Tree

class Tree<T = {}> extends React.Component<TreeProps<T>> {}

Tree component.
See Also
- https://blueprintjs.com/docs/#core/components/tree

property displayName

static displayName: string;

method getNodeContentElement

getNodeContentElement: (nodeId: string | number) => HTMLElement | undefined;

Returns the underlying HTML element of the Tree node with an id of nodeId. This element does not contain the children of the node, only its label and controls. If the node is not currently mounted, undefined is returned.

method nodeFromPath

static nodeFromPath: <U>(
    path: readonly number[],
    treeNodes?: ReadonlyArray<TreeNodeInfo<U>>
) => TreeNodeInfo<U>;

method ofType

static ofType: <U>() => new (props: TreeProps<U>) => Tree<U>;

method render

render: () => React.JSX.Element;

class TreeNode

class TreeNode<T = {}> extends React.Component<TreeNodeProps<T>> {}

Tree node component.
See Also
- https://blueprintjs.com/docs/#core/components/tree.tree-node

property displayName

static displayName: string;

method ofType

static ofType: <U>() => new (props: TreeNodeProps<U>) => TreeNode<U>;

Deprecated
no longer necessary now that the TypeScript parser supports type arguments on JSX element tags

method render

render: () => React.JSX.Element;

Interfaces

interface ActionProps

interface ActionProps<T extends HTMLElement = HTMLElement>
    extends IntentProps,
        Props {}

Interface for a clickable action, such as a button or menu item. These props can be spready directly to a <Button> or <MenuItem> element.
T type of the DOM element rendered by this component

property disabled

disabled?: boolean;

Whether this action is non-interactive.

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render before the text.

property onClick

onClick?: (event: React.MouseEvent<T>) => void;

Click event handler.

property onFocus

onFocus?: (event: React.FocusEvent<T>) => void;

Focus event handler.

property text

text?: React.ReactNode;

Action text. Can be any single React renderable.

interface AlertProps

interface AlertProps extends OverlayLifecycleProps, Props {}

property cancelButtonText

cancelButtonText?: string;

The text for the cancel button. If this prop is defined, then either onCancel or onClose must also be defined.

property canEscapeKeyCancel

canEscapeKeyCancel?: boolean;

Whether pressing escape when focused on the Alert should cancel the alert. If this prop is enabled, then either onCancel or onClose must also be defined.
false

property canOutsideClickCancel

canOutsideClickCancel?: boolean;

Whether clicking outside the Alert should cancel the alert. If this prop is enabled, then either onCancel or onClose must also be defined.
false

property children

children?: React.ReactNode;

Dialog contents.

property confirmButtonText

confirmButtonText?: string;

The text for the confirm (right-most) button. This button will always appear, and uses the value of the intent prop below.
"OK"

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to display on the left side.

property intent

intent?: Intent;

The intent to be applied to the confirm (right-most) button and the icon (if provided).

property isOpen

isOpen: boolean;

Toggles the visibility of the alert. This prop is required because the component is controlled.

property loading

loading?: boolean;

If set to true, the confirm button will be set to its loading state. The cancel button, if visible, will be disabled.
false

property onCancel

onCancel?: (event?: React.SyntheticEvent<HTMLElement>) => void;

Handler invoked when the alert is canceled. Alerts can be **canceled** in the following ways: - clicking the cancel button (if cancelButtonText is defined) - pressing the escape key (if canEscapeKeyCancel is enabled) - clicking on the overlay backdrop (if canOutsideClickCancel is enabled)
If any of the cancel props are defined, then either onCancel or onClose must be defined.

property onClose

onClose?: (
    confirmed: boolean,
    event?: React.SyntheticEvent<HTMLElement>
) => void;

Handler invoked when the Alert is confirmed or canceled; see onConfirm and onCancel for more details. First argument is true if confirmed, false otherwise. This is an alternative to defining separate onConfirm and onCancel handlers.

property onConfirm

onConfirm?: (event?: React.SyntheticEvent<HTMLElement>) => void;

Handler invoked when the confirm button is clicked. Alerts can be **confirmed** in the following ways: - clicking the confirm button - focusing on the confirm button and pressing enter or space

property portalContainer

portalContainer?: HTMLElement;

The container element into which the overlay renders its contents, when usePortal is true. This prop is ignored if usePortal is false.
document.body

property style

style?: React.CSSProperties;

CSS styles to apply to the alert.

property transitionDuration

transitionDuration?: number;

Indicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React CSSTransition to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
300

interface BlueprintProviderProps

interface BlueprintProviderProps
    extends OverlaysProviderProps,
        PortalContextOptions,
        HotkeysProviderPrefix<HotkeysProviderProps> {}

interface BreadcrumbProps

interface BreadcrumbProps extends ActionProps<HTMLAnchorElement>, LinkProps {}

property children

children?: React.ReactNode;

property current

current?: boolean;

Whether this breadcrumb is the current breadcrumb.

property iconTitle

iconTitle?: string;

Pass through value to icon's title attribute. Should be used for breadcrumbs without text or children defined.

interface BreadcrumbsProps

interface BreadcrumbsProps extends Props {}

property breadcrumbRenderer

breadcrumbRenderer?: (props: BreadcrumbProps) => React.JSX.Element;

Callback invoked to render visible breadcrumbs. Best practice is to render a <Breadcrumb> element. If currentBreadcrumbRenderer is also supplied, that callback will be used for the current breadcrumb instead.
Breadcrumb

property collapseFrom

collapseFrom?: Boundary;

Which direction the breadcrumbs should collapse from: start or end.
Boundary.START

property currentBreadcrumbRenderer

currentBreadcrumbRenderer?: (props: BreadcrumbProps) => React.JSX.Element;

Callback invoked to render the current breadcrumb, which is the last element in the items array.
If this prop is omitted, breadcrumbRenderer will be invoked for the current breadcrumb instead.

property items

items: readonly BreadcrumbProps[];

All breadcrumbs to display. Breadcrumbs that do not fit in the container will be rendered in an overflow menu instead.

property minVisibleItems

minVisibleItems?: number;

The minimum number of visible breadcrumbs that should never collapse into the overflow menu, regardless of DOM dimensions.
0

property overflowButtonProps

overflowButtonProps?: React.HTMLProps<HTMLSpanElement>;

Props to spread to the OverflowList popover target.

property overflowListProps

overflowListProps?: Partial<
    Omit<
        OverflowListProps<BreadcrumbProps>,
        'items' | 'overflowRenderer' | 'visibleItemRenderer'
    >
>;

Props to spread to OverflowList. Note that items, overflowRenderer, and visibleItemRenderer cannot be changed.

property popoverProps

popoverProps?: Partial<
    Omit<
        PopoverProps,
        | 'content'
        | 'defaultIsOpen'
        | 'disabled'
        | 'fill'
        | 'renderTarget'
        | 'targetTagName'
    >
>;

Props to spread to the popover showing the overflow menu.

interface ButtonGroupProps

interface ButtonGroupProps
    extends Props,
        HTMLDivProps,
        React.RefAttributes<HTMLDivElement> {}

property alignText

alignText?: Alignment;

Text alignment within button. By default, icons and text will be centered within the button. Passing "start" or "end" will align the button text to that side and push icon and endIcon to either edge. Passing "center" will center the text and icons together.

property children

children: React.ReactNode;

Buttons in this group.

property fill

fill?: boolean;

Whether the button group should take up the full width of its container.
false

property large

large?: boolean;

Whether the child buttons should appear with large styling.
Deprecated
use size="large" instead. false

property minimal

minimal?: boolean;

Whether the child buttons should appear with minimal styling.
Deprecated
use variant="minimal" instead false

property outlined

outlined?: boolean;

Whether the child buttons should use outlined styles.
Deprecated
use variant="outlined" instead false

property size

size?: Size;

The size of the child buttons.
"medium"

property variant

variant?: ButtonVariant;

Visual style variant for the child buttons.
"solid"

property vertical

vertical?: boolean;

Whether the button group should appear with vertical styling.
false

interface ButtonSharedProps

interface ButtonSharedProps extends ActionProps<HTMLElement> {}

property active

active?: boolean;

If set to true, the button will display in an active state. This is equivalent to setting className={Classes.ACTIVE}.
false

property alignText

alignText?: Alignment;

Text alignment within button. By default, icons and text will be centered within the button. Passing "start" or "end" will align the button text to that side and push icon and endIcon to either edge. Passing "center" will center the text and icons together.
Alignment.CENTER

property children

children?: React.ReactNode;

Button contents.

property ellipsizeText

ellipsizeText?: boolean;

If set to true, the button text element will hide overflow text that does not fit into a single line and show a trailing ellipsis, similar to the Text component.
false

property endIcon

endIcon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render after the text.

property fill

fill?: boolean;

Whether this button should expand to fill its container.

property large

large?: boolean;

Whether this button should use large styles.
Deprecated
use size="large" instead. false

property loading

loading?: boolean;

If set to true, the button will display a centered loading spinner instead of its contents and the button will be disabled (_even if_ disabled={false}). The width of the button is not affected by the value of this prop.
false

property minimal

minimal?: boolean;

Whether this button should use minimal styles.
Deprecated
use variant="minimal" instead false

property outlined

outlined?: boolean;

Whether this button should use outlined styles.
Deprecated
use variant="outlined" instead false

property rightIcon

rightIcon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render after the text.
Deprecated
Use endIcon instead

property size

size?: Size;

The size of the button.
"medium"

property small

small?: boolean;

Whether this button should use small styles.
Deprecated
use size="small" instead. false

property textClassName

textClassName?: string;

Class name(s) to apply to the text span element.

property type

type?: 'submit' | 'reset' | 'button';

HTML type attribute of button. Accepted values are "button", "submit", and "reset". Note that this prop has no effect on AnchorButton; it only affects Button.
"button"

property variant

variant?: ButtonVariant;

Visual style variant for the button. "minimal" renders a button without background styling, "outlined" adds a border without a fill, and "solid" (default) renders a button with background fill styling.
"solid"

interface CalloutProps

interface CalloutProps extends IntentProps, Props, HTMLDivProps {}

This component also supports the full range of HTML <div> attributes.

property children

children?: React.ReactNode;

Callout contents.

property compact

compact?: boolean;

Whether to use a compact appearance, which reduces the visual padding around callout content.

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render on the left side.
If this prop is omitted or undefined, the intent prop will determine a default icon. If this prop is explicitly null, no icon will be displayed (regardless of intent).

property intent

intent?: Intent;

Visual intent color to apply to background, title, and icon.
Defining this prop also applies a default icon, if the icon prop is omitted.

property minimal

minimal?: boolean;

Whether the callout should have a minimal appearance with no background color fill.
false

property title

title?: string;

String content of optional title element.
Due to a conflict with the HTML prop types, to provide JSX content simply pass <H4>JSX title content</H4> as first children element instead of using this prop (note uppercase tag name to use the Blueprint Heading component).

interface CardListProps

interface CardListProps
    extends Props,
        HTMLDivProps,
        React.RefAttributes<HTMLDivElement> {}

property bordered

bordered?: boolean;

Whether this container element should have a visual border.
Set this to false to remove elevation and border radius styles, which allows this element to be a child of another bordered container element without padding (like SectionCard). Note that this also sets a 1px margin _in dark theme_ to account for inset box shadows in that theme used across the design system. Be sure to test your UI in both light and dark theme if you modify this prop value.
true

property compact

compact?: boolean;

Whether this component should use compact styles with reduced visual padding.
Note that this prop affects styling for all Cards within this CardList and you do not need to set the compact prop individually on those child Cards.
false

interface CardProps

interface CardProps
    extends Props,
        HTMLDivProps,
        React.RefAttributes<HTMLDivElement> {}

property compact

compact?: boolean;

Whether this component should use compact styles with reduced visual padding.
false

property elevation

elevation?: Elevation;

Controls the intensity of the drop shadow beneath the card: the higher the elevation, the higher the drop shadow. At elevation 0, no drop shadow is applied.
0

property interactive

interactive?: boolean;

Whether the card should respond to user interactions. If set to true, hovering over the card will increase the card's elevation and change the mouse cursor to a pointer.
Recommended when onClick is also defined.
false

property onClick

onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;

Callback invoked when the card is clicked. Recommended when interactive is true.

property selected

selected?: boolean;

Whether this card should appear selected.
undefined

interface CheckboxProps

interface CheckboxProps extends ControlProps {}

Checkbox component props.

property defaultIndeterminate

defaultIndeterminate?: boolean;

Whether this checkbox is initially indeterminate (uncontrolled mode).

property indeterminate

indeterminate?: boolean;

Whether this checkbox is indeterminate, or "partially checked." The checkbox will appear with a small dash instead of a tick to indicate that the value is not exactly true or false.
Note that this prop takes precendence over checked: if a checkbox is marked both checked and indeterminate via props, it will appear as indeterminate in the DOM.

interface CollapseProps

interface CollapseProps extends Props {}

property children

children?: React.ReactNode;

Contents to collapse.

property component

component?: React.ElementType;

Component to render as the root element. Useful when rendering a Collapse inside a <table>, for instance.
"div"

property isOpen

isOpen?: boolean;

Whether the component is open or closed.
false

property keepChildrenMounted

keepChildrenMounted?: boolean;

Whether the child components will remain mounted when the Collapse is closed. Setting to true may improve performance by avoiding re-mounting children.
false

property transitionDuration

transitionDuration?: number;

The length of time the transition takes, in milliseconds. This must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
200

interface CompoundTagProps

interface CompoundTagProps
    extends TagSharedProps,
        React.RefAttributes<HTMLSpanElement>,
        React.HTMLAttributes<HTMLSpanElement> {}

property children

children: React.ReactNode;

Child nodes which will be rendered on the right side of the tag (e.g. the "value" in a key-value pair).

property leftContent

leftContent: React.ReactNode;

Content to be rendered on the left side of the tag (e.g. the "key" in a key-value pair). This prop must be defined; if you have no content to show here, then use a <Tag> instead.

property onRemove

onRemove?: (
    e: React.MouseEvent<HTMLButtonElement>,
    tagProps: CompoundTagProps
) => void;

Click handler for remove button. The remove button will only be rendered if this prop is defined.

interface ContextMenuChildrenProps

interface ContextMenuChildrenProps {}

Render props for advanced usage of ContextMenu.

property className

className: string;

Context menu container element class

property contentProps

contentProps: ContextMenuContentProps;

Render props relevant to the content of this context menu

property onContextMenu

onContextMenu: React.MouseEventHandler<HTMLElement>;

Context menu handler which implements the custom context menu interaction

property popover

popover: React.JSX.Element | undefined;

Popover element rendered by ContextMenu, used to establish a click target to position the menu

property ref

ref: React.Ref<any>;

DOM ref for the context menu target, used to detect dark theme

interface ContextMenuContentProps

interface ContextMenuContentProps {}

Render props relevant to the _content_ of a context menu (rendered as the underlying Popover's content).

property isOpen

isOpen: boolean;

Whether the context menu is currently open.

property mouseEvent

mouseEvent: React.MouseEvent<HTMLElement> | undefined;

The context menu click event. If isOpen is false, this will be undefined.

property targetOffset

targetOffset: Offset | undefined;

The computed target offset (x, y) coordinates for the context menu click event. On first render, before any context menu click event has occurred, this will be undefined.

interface ContextMenuPopoverProps

interface ContextMenuPopoverProps extends ContextMenuPopoverOptions {}

property content

content: React.JSX.Element;

property isDarkTheme

isDarkTheme?: boolean;

property isOpen

isOpen: boolean;

property onClose

onClose?: () => void;

property targetOffset

targetOffset: Offset | undefined;

interface ContextMenuProps

interface ContextMenuProps
    extends Omit<
            React.HTMLAttributes<HTMLElement>,
            'children' | 'className' | 'content' | 'onContextMenu'
        >,
        React.RefAttributes<any>,
        Props {}

property children

children:
    | React.ReactNode
    | ((props: ContextMenuChildrenProps) => React.ReactElement);

The context menu target. This may optionally be a render function so you can use component state to render the target.

property content

content:
    | React.JSX.Element
    | ((props: ContextMenuContentProps) => React.JSX.Element | undefined)
    | undefined;

Menu content. This will usually be a Blueprint <Menu> component. This optionally functions as a render prop so you can use component state to render content.

property disabled

disabled?: boolean;

Whether the context menu is disabled.
false

property onClose

onClose?: () => void;

Callback invoked when the popover overlay closes.

property onContextMenu

onContextMenu?: React.MouseEventHandler<HTMLElement>;

An optional context menu event handler. This can be useful if you want to do something with the mouse event unrelated to rendering the context menu itself, especially if that involves setting React state (which is an error to do in the render code path of this component).

property popoverProps

popoverProps?: ContextMenuPopoverOptions;

A limited subset of props to forward along to the popover overlay generated by this component.

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

HTML tag to use for container element. Only used if this component's children are specified as React node(s), not when it is a render function (in that case, you get to render whatever tag you wish).
"div"

interface ContextMenuTargetLegacyComponent

interface ContextMenuTargetLegacyComponent extends React.Component {}

property onContextMenuClose

onContextMenuClose?: () => void;

property renderContextMenu

renderContextMenu: (
    e: React.MouseEvent<HTMLElement>
) => React.JSX.Element | undefined;

method render

render: () => React.ReactElement<any> | null | undefined;

interface ControlCardProps

interface ControlCardProps extends SupportedCardProps, SupportedControlProps {}

Shared props interface for all control card components, including CheckboxCard, RadioCard, and SwitchCard. The label content may be specified as either label or children, but not both.

property controlKind

controlKind: ControlKind;

Which kind of form control to render inside the card.

property inputProps

inputProps?: Omit<HTMLInputProps, 'size'>;

HTML input attributes to forward to the control <input> element.

property showAsSelectedWhenChecked

showAsSelectedWhenChecked?: boolean;

Whether the component should use "selected" Card styling when checked.
true

interface ControlGroupProps

interface ControlGroupProps
    extends Props,
        HTMLDivProps,
        React.RefAttributes<HTMLDivElement> {}

property children

children?: React.ReactNode;

Group contents.

property fill

fill?: boolean;

Whether the control group should take up the full width of its container.
false

property vertical

vertical?: boolean;

Whether the control group should appear with vertical styling.
false

interface ControlledValueProps

interface ControlledValueProps<T, E extends HTMLElement = HTMLElement> {}

Interface for a controlled or uncontrolled component, typically a form control.

property defaultValue

defaultValue?: T;

Initial value for uncontrolled usage. Mutually exclusive with value prop.

property onValueChange

onValueChange?: (value: T, targetElement: E | null) => void;

Callback invoked when the component value changes, typically via user interaction, in both controlled and uncontrolled mode.
Using this prop instead of onChange can help avoid common bugs in React 16 related to Event Pooling where developers forget to save the text value from a change event or call event.persist().
See Also
- https://legacy.reactjs.org/docs/legacy-event-pooling.html

property value

value?: T;

Controlled value. Mutually exclusive with defaultValue prop.

interface ControlProps

interface ControlProps
    extends CheckedControlProps,
        Props,
        Omit<HTMLInputProps, 'size'>,
        React.RefAttributes<HTMLLabelElement> {}

Shared props for form control components like Switch, Checkbox, and Radio.

property alignIndicator

alignIndicator?: Alignment;

Alignment of the indicator within container.
Alignment.START

property children

children?: React.ReactNode;

JSX label for the control.

property disabled

disabled?: boolean;

Whether the control is non-interactive.

property inline

inline?: boolean;

Whether the control should appear as an inline element.

property inputRef

inputRef?: React.Ref<HTMLInputElement>;

Ref attached to the HTML <input> element backing this component.

property label

label?: string;

Text label for the control.
Use children or labelElement to supply JSX content. This prop actually supports JSX elements, but TypeScript will throw an error because HTMLAttributes only allows strings.

property labelElement

labelElement?: React.ReactNode;

JSX element label for the control.
This prop is a workaround for TypeScript consumers as the type definition for label only accepts strings. JavaScript consumers can provide a JSX element directly to label.

property large

large?: boolean;

Whether this control should use large styles.
Deprecated
use size="large" instead false

property size

size?: NonSmallSize;

Size of the control.
"medium"

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

Name of the HTML tag that wraps the checkbox.
By default a <label> is used, which effectively enlarges the click target to include all of its children. Supply a different tag name if this behavior is undesirable or you're listening to click events from a parent element (as the label can register duplicate clicks).
"label"

interface DefaultIconProps

interface DefaultIconProps
    extends IntentProps,
        Props,
        DefaultSVGIconProps,
        IconOwnProps {}

The default <Icon> props interface, equivalent to IconProps with its default type parameter. This is primarly exported for documentation purposes; users should reference IconProps<T> instead.

interface DialogBodyProps

interface DialogBodyProps extends Props, HTMLDivProps {}

property children

children?: React.ReactNode;

Dialog body contents.

property useOverflowScrollContainer

useOverflowScrollContainer?: boolean;

Enable scrolling for the container
true

interface DialogFooterProps

interface DialogFooterProps extends Props, HTMLDivProps {}

property actions

actions?: React.ReactNode;

Dialog actions (typically buttons) are rendered on the right side of the footer.

property children

children?: React.ReactNode;

Child contents are rendered on the left side of the footer.

property minimal

minimal?: boolean;

Use a "minimal" appearance for the footer, simply applying an HTML role and some visual padding. This is useful for small dialogs, and should not be used with <DialogBody useOverflowScrollContainer>.
Note that this is the default behavior when using the CSS API, since that's how the -dialog-footer class was first introduced, so these styles are applied without a "modifier" class.
When using the JS component API, minimal is false by default.
Show the footer close from the content. Do not use with scroll body Use for small dialogs (confirm)
false;

interface DialogProps

interface DialogProps extends OverlayableProps, BackdropProps, Props {}

property "aria-describedby"

'aria-describedby'?: string;

ID of an element that contains description text inside this dialog.

property "aria-labelledby"

'aria-labelledby'?: string;

ID of the element that contains title or label text for this dialog.
By default, if the title prop is supplied, this component will generate a unique ID for the <H5> title element and use that ID here.

property children

children?: React.ReactNode;

Dialog contents.

property containerRef

containerRef?: React.Ref<HTMLDivElement>;

Ref attached to the Classes.DIALOG_CONTAINER element.

property hasBackdrop

hasBackdrop?: never;

Dialog always has a backdrop so this prop cannot be overriden.

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render in the dialog's header. Note that the header will only be rendered if title is provided.

property isCloseButtonShown

isCloseButtonShown?: boolean;

Whether to show the close button in the dialog's header. Note that the header will only be rendered if title is provided.
true

property isOpen

isOpen: boolean;

Toggles the visibility of the overlay and its children. This prop is required because the component is controlled.

property role

role?: Extract<React.AriaRole, 'dialog' | 'alertdialog'>;

"dialog"

property style

style?: React.CSSProperties;

CSS styles to apply to the dialog.
{}

property title

title?: React.ReactNode;

Title of the dialog. If provided, an element with Classes.DIALOG_HEADER will be rendered inside the dialog before any children elements.

property transitionName

transitionName?: string;

Name of the transition for internal CSSTransition. Providing your own name here will require defining new CSS transition properties.

interface DialogStepProps

interface DialogStepProps
    extends Props,
        Omit<HTMLDivProps, 'id' | 'title' | 'onClick'> {}

property backButtonProps

backButtonProps?: DialogStepButtonProps;

Props for the back button.

property id

id: DialogStepId;

Unique identifier used to identify which step is selected.

property nextButtonProps

nextButtonProps?: DialogStepButtonProps;

Props for the next button.

property panel

panel: React.JSX.Element;

Panel content, rendered by the parent MultistepDialog when this step is active.

property panelClassName

panelClassName?: string;

Space-delimited string of class names applied to multistep dialog panel container.

property title

title?: React.ReactNode;

Content of step title element, rendered in a list left of the active panel.

interface DividerProps

interface DividerProps extends Props, React.HTMLAttributes<HTMLElement> {}

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

HTML tag to use for element.
"div"

interface DrawerProps

interface DrawerProps extends OverlayableProps, BackdropProps, Props {}

property children

children?: React.ReactNode;

Drawer contents.

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render in the drawer's header. Note that the header will only be rendered if title is provided.

property isCloseButtonShown

isCloseButtonShown?: boolean;

Whether to show the close button in the dialog's header. Note that the header will only be rendered if title is provided.
true

property isOpen

isOpen: boolean;

Toggles the visibility of the overlay and its children. This prop is required because the component is controlled.

property position

position?: Position;

Position of a drawer. All angled positions will be casted into pure positions (top, bottom, left, or right).
"right"

property size

size?: number | string;

CSS size of the drawer. This sets width if horizontal position (default) and height otherwise.
Constants are available for common sizes: - DrawerSize.SMALL = 360px - DrawerSize.STANDARD = 50% - DrawerSize.LARGE = 90%
DrawerSize.STANDARD = "50%"

property style

style?: React.CSSProperties;

CSS styles to apply to the dialog.
{}

property title

title?: React.ReactNode;

Title of the dialog. If provided, an element with Classes.DIALOG_HEADER will be rendered inside the dialog before any children elements.

property transitionName

transitionName?: string;

Name of the transition for internal CSSTransition. Providing your own name here will require defining new CSS transition properties.

interface EditableTextProps

interface EditableTextProps extends IntentProps, Props {}

property alwaysRenderInput

alwaysRenderInput?: boolean;

EXPERIMENTAL FEATURE.
When true, this forces the component to _always_ render an editable input (or textarea) both when the component is focussed and unfocussed, instead of the component's default behavior of switching between a text span and a text input upon interaction.
This behavior can help in certain applications where, for example, a custom right-click context menu is used to supply clipboard copy and paste functionality.
false

property confirmOnEnterKey

confirmOnEnterKey?: boolean;

If true and in multiline mode, the enter key will trigger onConfirm and mod+enter will insert a newline. If false, the key bindings are inverted such that enter adds a newline.
false

property contentId

contentId?: string;

ID attribute to pass to the underlying element that contains the text contents. This allows for referencing via aria attributes

property customInputAttributes

customInputAttributes?: HTMLInputProps & HTMLTextAreaProps;

Custom attributes that will be passed to the underlying input (or textarea) element. This allows you to specify additional attributes like aria- attributes, data- attributes, etc.

property defaultValue

defaultValue?: string;

Default text value of uncontrolled input.

property disabled

disabled?: boolean;

Whether the text can be edited.
false

property elementRef

elementRef?: React.Ref<HTMLDivElement>;

Ref to attach to the root element rendered by this component.
N.B. this may be renamed to simply ref in a future major version of Blueprint, when this class component is refactored into a function.

property isEditing

isEditing?: boolean;

Whether the component is currently being edited.

property maxLength

maxLength?: number;

Maximum number of characters allowed. Unlimited by default.

property maxLines

maxLines?: number;

Maximum number of lines before scrolling begins, when multiline.

property minLines

minLines?: number;

Minimum number of lines (essentially minimum height), when multiline.
1

property minWidth

minWidth?: number;

Minimum width in pixels of the input, when not multiline.

property multiline

multiline?: boolean;

Whether the component supports multiple lines of text. This prop should not be changed during the component's lifetime.
false

property placeholder

placeholder?: string;

Placeholder text when there is no value.
"Click to Edit"

property selectAllOnFocus

selectAllOnFocus?: boolean;

Whether the entire text field should be selected on focus. If false, the cursor is placed at the end of the text. This prop is ignored on inputs with type other then text, search, url, tel and password. See https://html.spec.whatwg.org/multipage/input.html#do-not-apply for details.
false

property type

type?: string;

The type of input that should be shown, when not multiline.

property value

value?: string;

Text value of controlled input.

method onCancel

onCancel: (value: string) => void;

Callback invoked when user cancels input with the esc key. Receives last confirmed value.

method onChange

onChange: (value: string) => void;

Callback invoked when user changes input in any way.

method onConfirm

onConfirm: (value: string) => void;

Callback invoked when user confirms value with enter key or by blurring input.

method onEdit

onEdit: (value: string | undefined) => void;

Callback invoked after the user enters edit mode.

interface EntityTitleProps

interface EntityTitleProps extends Props {}

property ellipsize

ellipsize?: boolean;

Whether the overflowing text content should be ellipsized.
false

property fill

fill?: boolean;

Whether the component should expand to fill its container.

property heading

heading?: React.FC<any>;

React component to render the main title heading. This defaults to Blueprint's <Text> component, * which inherits font size from its containing element(s).
To render larger, more prominent titles, Use Blueprint's heading components instead (e.g. { H1 } from "@blueprintjs/core").
Text

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render in the section's header. Note that the header will only be rendered if title is provided.

property loading

loading?: boolean;

Whether to render as loading state.
false

property subtitle

subtitle?: React.JSX.Element | string;

The content to render below the title. Defaults to render muted text.

property tags

tags?: React.ReactNode;

components work best - if multiple, wrap in <React.Fragment>

property title

title: React.JSX.Element | string;

The primary title to render.

property titleURL

titleURL?: string;

If specified, the title will be wrapped in an anchor with this URL.

interface FileInputProps

interface FileInputProps
    extends React.LabelHTMLAttributes<HTMLLabelElement>,
        Props {}

property buttonText

buttonText?: string;

The button text to display on the right side of the input.
"Browse"

property disabled

disabled?: boolean;

Whether the file input is non-interactive. Setting this to true will automatically disable the child input too.

property fill

fill?: boolean;

Whether the file input should take up the full width of its container.

property hasSelection

hasSelection?: boolean;

Whether the user has made a selection in the input. This will affect the component's text styling. Make sure to set a non-empty value for the text prop as well.
false

property inputProps

inputProps?: React.HTMLProps<HTMLInputElement>;

The props to pass to the child input. disabled will be ignored in favor of the top-level prop. type will be ignored, because the input _must_ be type="file". Pass onChange here to be notified when the user selects a file.

property large

large?: boolean;

Whether the file input should appear with large styling.
Deprecated
use size="large" instead. false

property onInputChange

onInputChange?: React.FormEventHandler<HTMLInputElement>;

Callback invoked on <input> change events.
This callback is offered as a convenience; it is equivalent to inputProps.onChange.
__Note:__ The top-level onChange prop is passed to the <label> element rather than the <input>, which may not be what you expect.

property size

size?: Size;

The size of the file input.

property small

small?: boolean;

Whether the file input should appear with small styling.
Deprecated
use size="small" instead. false

property text

text?: React.ReactNode;

The text to display inside the input.
"Choose file..."

interface FormGroupProps

interface FormGroupProps extends IntentProps, Props, HTMLDivProps {}

property children

children?: React.ReactNode;

Group contents.

property contentClassName

contentClassName?: string;

A space-delimited list of class names to pass along to the Classes.FORM_CONTENT element that contains children.

property disabled

disabled?: boolean;

Whether form group should appear as non-interactive. Remember that input elements must be disabled separately.

property fill

fill?: boolean;

Whether the component should take up the full width of its container.

property helperText

helperText?: React.ReactNode;

Optional helper text. The given content will be wrapped in Classes.FORM_HELPER_TEXT and displayed beneath children. Helper text color is determined by the intent.

property inline

inline?: boolean;

Whether to render the label and children on a single line.

property intent

intent?: Intent;

Visual intent to apply to helper text and sub label. Note that child form elements need to have their own intents applied independently.

property label

label?: React.ReactNode;

Label of this form group.

property labelFor

labelFor?: string;

id attribute of the labelable form element that this FormGroup controls, used as <label for> attribute.

property labelInfo

labelInfo?: React.ReactNode;

Optional secondary text that appears after the label.

property style

style?: React.CSSProperties;

CSS properties to apply to the root element.

property subLabel

subLabel?: React.ReactNode;

Optional text for label. The given content will be wrapped in Classes.FORM_GROUP_SUB_LABEL and displayed beneath label.

interface HandleProps

interface HandleProps extends Props {}

property htmlProps

htmlProps?: HandleHtmlProps;

A limited subset of HTML props to apply to the rendered <span> element.

property intentAfter

intentAfter?: Intent;

Intent for the track segment immediately after this handle, taking priority over intentBefore.

property intentBefore

intentBefore?: Intent;

Intent for the track segment immediately before this handle.

property interactionKind

interactionKind?: HandleInteractionKind;

How this handle interacts with other handles.
"lock"

property onChange

onChange?: (newValue: number) => void;

Callback invoked when this handle's value is changed due to a drag interaction. Note that "push" interactions can cause multiple handles to update at the same time.

property onRelease

onRelease?: (newValue: number) => void;

Callback invoked when this handle is released (the end of a drag interaction).

property trackStyleAfter

trackStyleAfter?: CSSProperties;

Style to use for the track segment immediately after this handle, taking priority over trackStyleBefore.

property trackStyleBefore

trackStyleBefore?: CSSProperties;

Style to use for the track segment immediately before this handle

property type

type?: HandleType;

Handle appearance type.
"full"

property value

value: number;

Numeric value of this handle.

interface HotkeyConfig

interface HotkeyConfig {}

property allowInInput

allowInInput?: boolean;

Whether the hotkey should be triggerable when focused in a text input.
false

property combo

combo: string;

Hotkey combination string (AKA "key combo"), such as "space" or "cmd+n".

property disabled

disabled?: boolean;

Whether the hotkey cannot be triggered.
false

property global

global?: boolean;

If false, the hotkey is active only when the target is focused. If true, the hotkey can be triggered regardless of what component is focused.
false

property group

group?: string;

Unless the hotkey is global, you must specify a group where the hotkey will be displayed in the hotkeys dialog. This string will be displayed in a header at the start of the group of hotkeys.

property label

label: React.ReactNode;

Human-friendly label for the hotkey.

property preventDefault

preventDefault?: boolean;

When true, invokes event.preventDefault() before the respective onKeyDown and onKeyUp callbacks are invoked. Enabling this can simplify handler implementations.
false

property stopPropagation

stopPropagation?: boolean;

When true, invokes event.stopPropagation() before the respective onKeyDown and onKeyUp callbacks are invoked. Enabling this can simplify handler implementations.
false

method onKeyDown

onKeyDown: (e: KeyboardEvent) => any;

keydown event handler.

method onKeyUp

onKeyUp: (e: KeyboardEvent) => any;

keyup event handler.

interface HotkeysProps

interface HotkeysProps extends Props {}

property children

children?: React.ReactNode;

An array of Hotkey components that define the hotkeys to be used.

property tabIndex

tabIndex?: number;

In order to make local hotkeys work on elements that are not normally focusable, such as <div>s or <span>s, we add a tabIndex attribute to the hotkey target, which makes it focusable. By default, we use 0, but you can override this value to change the tab navigation behavior of the component. You may even set this value to null, which will omit the tabIndex from the component decorated by HotkeysTarget.

interface HotkeysProviderProps

interface HotkeysProviderProps {}

property dialogProps

dialogProps?: Partial<Omit<HotkeysDialogProps, 'hotkeys'>>;

Optional props to customize the rendered hotkeys dialog.

property renderDialog

renderDialog?: (
    state: HotkeysContextState,
    contextActions: {
        handleDialogClose: () => void;
    }
) => React.JSX.Element;

If provided, this dialog render function will be used in place of the default implementation.

property value

value?: HotkeysContextInstance;

If provided, we will use this context instance instead of generating our own.

interface HotkeysTarget2Props

interface HotkeysTarget2Props {}

property children

children:
    | React.JSX.Element
    | ((props: HotkeysTarget2RenderProps) => React.JSX.Element);

Render prop which receives the same callback handlers generated by the useHotkeys hook. If your hotkey definitions are all global, you may supply an element instead.

property hotkeys

hotkeys: readonly HotkeyConfig[];

Hotkey definitions.

property options

options?: UseHotkeysOptions;

Hook customization options.

interface HotkeysTarget2RenderProps

interface HotkeysTarget2RenderProps {}

Identical to the return type of useHotkeys hook.

property handleKeyDown

handleKeyDown: React.KeyboardEventHandler<HTMLElement>;

property handleKeyUp

handleKeyUp: React.KeyboardEventHandler<HTMLElement>;

interface HTMLSelectProps

interface HTMLSelectProps
    extends React.RefAttributes<HTMLSelectElement>,
        React.SelectHTMLAttributes<HTMLSelectElement> {}

property children

children?: React.ReactNode;

property disabled

disabled?: boolean;

Whether this element is non-interactive.

property fill

fill?: boolean;

Whether this element should fill its container.

property iconName

iconName?: HTMLSelectIconName;

Name of one of the supported icons for this component to display on the right side of the element.
"double-caret-vertical"

property iconProps

iconProps?: Partial<SVGIconProps>;

Props to spread to the icon element displayed on the right side of the element.

property large

large?: boolean;

Whether to use large styles.

property minimal

minimal?: boolean;

Whether to use minimal styles.

property multiple

multiple?: never;

Multiple select is not supported.

property onChange

onChange?: React.ChangeEventHandler<HTMLSelectElement>;

Change event handler. Use event.currentTarget.value to access the new value.

property options

options?: ReadonlyArray<string | number | OptionProps>;

Shorthand for supplying options: an array of basic types or { label?, value } objects. If no label is supplied, value will be used as the label.

property placeholder

placeholder?: string;

Placeholder text to display when no option is selected.

property value

value?: string | number;

Controlled value of this component.

interface HTMLTableProps

interface HTMLTableProps
    extends React.TableHTMLAttributes<HTMLTableElement>,
        React.RefAttributes<HTMLTableElement> {}

property bordered

bordered?: boolean;

Enable borders between rows and cells.

property compact

compact?: boolean;

Use compact appearance with less padding.

property interactive

interactive?: boolean;

Enable hover styles on rows.

property striped

striped?: boolean;

Use an alternate background color on odd-numbered rows.

interface IconComponent

interface IconComponent extends React.FC<IconProps<Element>> {}

Generic icon component type. This is essentially a type hack required to make forwardRef work with generic components. Note that this slows down TypeScript compilation, but it better than the alternative of globally augmenting "@types/react".
See Also
- https://stackoverflow.com/a/73795494/7406866

call signature

<T extends Element = Element>(props: IconProps<T>): ReturnType<
    React.FC<IconProps<Element>>
> | null;

ReturnType here preserves type compatability with React 16 while we migrate to React 18. see: https://github.com/palantir/blueprint/pull/7142/files#r1915691062

interface IHotkeysTargetComponent

interface HotkeysTargetLegacyComponent extends React.Component {}

property renderHotkeys

renderHotkeys: () => React.ReactElement<HotkeysProps>;

Components decorated with the @HotkeysTargetLegacy decorator must implement this method, and it must return a Hotkeys React element.

method render

render: () => React.ReactElement<any> | null | undefined;

Components decorated with the @HotkeysTargetLegacy decorator must implement React's component render function.

interface InputGroupProps

interface InputGroupProps
    extends Omit<HTMLInputProps, keyof ControlledInputValueProps | 'size'>,
        ControlledInputValueProps,
        InputSharedProps {}

property asyncControl

asyncControl?: boolean;

Set this to true if you will be controlling the value of this input with asynchronous updates. These may occur if you do not immediately call setState in a parent component with the value from the onChange handler, or if working with certain libraries like __redux-form__.
false

property inputSize

inputSize?: HTMLInputProps['size'];

Alias for the native HTML input size attribute. see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/size

property large

large?: boolean;

Whether this input should use large styles.
Deprecated
use size="large" instead. false

property round

round?: boolean;

Whether the input (and any buttons) should appear with rounded caps.

property size

size?: Size | HTMLInputProps['size'];

Size of the input. If given a numeric value, and inputSize is not defined, then this will be provided as the size attribute for the underyling native HTML input element. Passing a numeric value this way is deprecated, use the inputSize prop instead.
"medium"

property small

small?: boolean;

Whether this input should use small styles.
Deprecated
use size="small" instead. false

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

Name of the HTML tag that contains the input group.
"div"

property type

type?: string;

HTML input type attribute.
"text"

interface InputGroupProps2

interface InputGroupProps
    extends Omit<HTMLInputProps, keyof ControlledInputValueProps | 'size'>,
        ControlledInputValueProps,
        InputSharedProps {}

property asyncControl

asyncControl?: boolean;

Set this to true if you will be controlling the value of this input with asynchronous updates. These may occur if you do not immediately call setState in a parent component with the value from the onChange handler, or if working with certain libraries like __redux-form__.
false

property inputSize

inputSize?: HTMLInputProps['size'];

Alias for the native HTML input size attribute. see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/size

property large

large?: boolean;

Whether this input should use large styles.
Deprecated
use size="large" instead. false

property round

round?: boolean;

Whether the input (and any buttons) should appear with rounded caps.

property size

size?: Size | HTMLInputProps['size'];

Size of the input. If given a numeric value, and inputSize is not defined, then this will be provided as the size attribute for the underyling native HTML input element. Passing a numeric value this way is deprecated, use the inputSize prop instead.
"medium"

property small

small?: boolean;

Whether this input should use small styles.
Deprecated
use size="small" instead. false

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

Name of the HTML tag that contains the input group.
"div"

property type

type?: string;

HTML input type attribute.
"text"

interface IntentProps

interface IntentProps {}

property intent

intent?: Intent;

Visual intent color to apply to element.

interface IPanel

interface IPanel<P = {}> {}

An object describing a panel in a PanelStack.
Deprecated
use Panel<T> with PanelStack2

property component

component: React.ComponentType<P & IPanelProps>;

The component type to render for this panel. This must be a reference to the component class or SFC, _not_ a JSX element, so it can be re-created dynamically when needed.

property htmlTitle

htmlTitle?: string;

HTML title to be passed to the component

property props

props?: P;

The props passed to the component type when it is rendered. The methods in IPanelProps will be injected by PanelStack.

property title

title?: React.ReactNode;

The title to be displayed above this panel. It is also used as the text of the back button for any panel opened by this panel.

interface IPanelProps

interface IPanelProps {}

Include this interface in your panel component's props type to access these two functions which are injected by PanelStack.
import { IPanelProps } from "@blueprintjs/core"; export class SettingsPanel extends React.Component<IPanelProps & ISettingsPanelProps> {...}
Deprecated
use PanelActions<T> with PanelStack2

method closePanel

closePanel: () => void;

Call this method to programatically close this panel. If this is the only panel on the stack then this method will do nothing.
Remember that the panel header always contains a "back" button that closes this panel on click (unless there is only one panel on the stack).

method openPanel

openPanel: <P>(panel: IPanel<P>) => void;

Call this method to open a new panel on the top of the stack.

interface KeyCombo

interface KeyCombo {}

property key

key?: string;

property modifiers

modifiers: number;

interface KeyComboTagProps

interface KeyComboTagProps extends Props {}

property combo

combo: string;

The key combo to display, such as "cmd + s".

property minimal

minimal?: boolean;

Whether to render in a minimal style. If false, each key in the combo will be rendered inside a <kbd> tag. If true, only the icon or short name of a key will be rendered with no wrapper styles.
false

interface LinkProps

interface LinkProps {}

Interface for a link, with support for customizing target window.

property href

href?: string;

Link URL.

property target

target?: React.HTMLAttributeAnchorTarget;

Link target attribute. Use "_blank" to open in a new window.

interface MenuDividerProps

interface MenuDividerProps extends Props {}

property children

children?: never;

This component does not support children.

property title

title?: React.ReactNode;

Optional header title.

property titleId

titleId?: string;

Optional id prop for the header title.

interface MenuItemProps

interface MenuItemProps
    extends ActionProps<HTMLAnchorElement>,
        React.AnchorHTMLAttributes<HTMLAnchorElement>,
        React.RefAttributes<HTMLLIElement> {}

Note that the HTML attributes supported by this component are spread to the nested <a> element, while the ref is attached to the root <li> element. This is an unfortunate quirk in the API which we keep around for backwards-compatibility.

property active

active?: boolean;

Whether this item should appear _active_, often useful to indicate keyboard focus. Note that this is distinct from _selected_ appearance, which has its own prop.

property children

children?: React.ReactNode;

Children of this component will be rendered in a _submenu_ that appears in a popover when hovering or clicking on this item.
Use text prop for the content of the menu item itself.

property disabled

disabled?: boolean;

Whether this menu item is non-interactive. Enabling this prop will ignore href, tabIndex, and mouse event handlers (in particular click, down, enter, leave).

property htmlTitle

htmlTitle?: string;

HTML title to be passed to the component

property label

label?: string;

Right-aligned label text content, useful for displaying hotkeys.
This prop actually supports JSX elements, but TypeScript will throw an error because HTMLAttributes only allows strings. Use labelElement to supply a JSX element in TypeScript.

property labelClassName

labelClassName?: string;

A space-delimited list of class names to pass along to the right-aligned label wrapper element.

property labelElement

labelElement?: React.ReactNode;

Right-aligned label content, useful for displaying hotkeys.

property multiline

multiline?: boolean;

Whether the text should be allowed to wrap to multiple lines. If false, text will be truncated with an ellipsis when it reaches max-width.
false

property popoverProps

popoverProps?: Partial<Omit<PopoverProps, 'content' | 'minimal'>>;

Props to spread to the submenu popover. Note that content and minimal cannot be changed and usePortal defaults to false so all submenus will live in the same container.

property roleStructure

roleStructure?: 'menuitem' | 'listoption' | 'listitem' | 'none';

Changes the ARIA role property structure of this MenuItem to accomodate for various different roles of the parent Menu ul element.
If menuitem, role structure becomes:
<li role="none"><a role="menuitem" /></li>
which is proper role structure for a <ul role="menu" parent (this is the default role of a Menu).
If listoption, role structure becomes:
<li role="option"><a role={undefined} /></li>
which is proper role structure for a <ul role="listbox" parent, or a <select> parent.
If listitem, role structure becomes:
<li role={undefined}><a role={undefined} /></li>
which can be used if this item is within a basic <ul/> (or role="list") parent.
If none, role structure becomes:
<li role="none"><a role={undefined} /></li>
which can be used if wrapping this item in a custom <li> parent.
"menuitem"

property selected

selected?: boolean;

Whether this item should appear selected - roleStructure must be "listoption" for this to be applied. Defining this will set the aria-selected attribute and apply a small tick icon if true, and empty space for a small tick icon if false or undefined.
undefined

property shouldDismissPopover

shouldDismissPopover?: boolean;

Whether an enabled item without a submenu should automatically close its parent popover when clicked.
true

property submenuProps

submenuProps?: Partial<MenuProps>;

Props to spread to the child Menu component if this item has a submenu.

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

Name of the HTML tag that wraps the MenuItem.
"a"

property text

text: React.ReactNode;

Item text, required for usability.

property textClassName

textClassName?: string;

A space-delimited list of class names to pass along to the text wrapper element.

interface MenuProps

interface MenuProps extends Props, React.HTMLAttributes<HTMLUListElement> {}

property children

children?: React.ReactNode;

Menu items.

property large

large?: boolean;

Whether the menu items in this menu should use a large appearance.
Deprecated
use size="large" instead. false

property size

size?: Size;

The size of the items in this menu.
"medium"

property small

small?: boolean;

Whether the menu items in this menu should use a small appearance.
Deprecated
use size="small" instead. false

property ulRef

ulRef?: React.Ref<HTMLUListElement>;

Ref handler that receives the HTML <ul> element backing this component.

interface MultiSliderProps

interface MultiSliderProps extends SliderBaseProps {}

property defaultTrackIntent

defaultTrackIntent?: Intent;

Default intent of a track segment, used only if no handle specifies intentBefore/After.

method onChange

onChange: (values: number[]) => void;

Callback invoked when a handle value changes. Receives handle values in sorted order.

method onRelease

onRelease: (values: number[]) => void;

Callback invoked when a handle is released. Receives handle values in sorted order.

interface MultistepDialogProps

interface MultistepDialogProps extends DialogProps {}

property backButtonProps

backButtonProps?: DialogStepButtonProps;

Props for the back button.

property children

children?: React.ReactNode;

Dialog steps.

property closeButtonProps

closeButtonProps?: DialogStepButtonProps;

Props for the close button that appears in the footer.

property finalButtonProps

finalButtonProps?: DialogStepButtonProps;

Props for the button to display on the final step.

property initialStepIndex

initialStepIndex?: number;

A 0 indexed initial step to start off on, to start in the middle of the dialog, for example. If the provided index exceeds the number of steps, it defaults to the last step. If a negative index is provided, it defaults to the first step.

property navigationPosition

navigationPosition?: MultistepDialogNavPosition;

Position of the step navigation within the dialog.
"left"

property nextButtonProps

nextButtonProps?: DialogStepButtonProps;

Props for the next button.

property resetOnClose

resetOnClose?: boolean;

Whether to reset the dialog state to its initial state on close. By default, closing the dialog will reset its state.
true

property showCloseButtonInFooter

showCloseButtonInFooter?: boolean;

Whether the footer close button is shown. When this value is true, the button will appear regardless of the value of isCloseButtonShown.
false

method onChange

onChange: (
    newDialogStepId: DialogStepId,
    prevDialogStepId: DialogStepId | undefined,
    event: React.MouseEvent<HTMLElement>
) => void;

A callback that is invoked when the user selects a different step by clicking on back, next, or a step itself.

interface NavbarDividerProps

interface NavbarDividerProps extends Props, HTMLDivProps {}

interface NavbarGroupProps

interface NavbarGroupProps extends Props, HTMLDivProps {}

property align

align?: Alignment;

The side of the navbar on which the group should appear. The Alignment enum provides constants for these values.
Alignment.START

property children

children?: React.ReactNode;

interface NavbarHeadingProps

interface NavbarHeadingProps extends Props, HTMLDivProps {}

property children

children?: React.ReactNode;

interface NavbarProps

interface NavbarProps extends Props, HTMLDivProps {}

property children

children?: React.ReactNode;

property fixedToTop

fixedToTop?: boolean;

Whether this navbar should be fixed to the top of the viewport (using CSS position: fixed).

interface NonIdealStateProps

interface NonIdealStateProps extends Props {}

property action

action?: React.JSX.Element;

An action to resolve the non-ideal state which appears after description.

property children

children?: React.ReactNode;

Advanced usage: React children will appear last (after action). Avoid passing raw strings as they will not receive margins and disrupt the layout flow.

property description

description?: React.ReactNode;

A longer description of the non-ideal state. A string or number value will be wrapped in a <div> to preserve margins.

property icon

icon?: IconName | MaybeElement;

The name of a Blueprint icon or a JSX element (such as <Spinner/>) to render above the title.

property iconMuted

iconMuted?: boolean;

Whether the icon should use a muted style.
true

property iconSize

iconSize?: NonIdealStateIconSize;

How large the icon visual should be.
NonIdealStateIconSize.STANDARD

property layout

layout?: 'vertical' | 'horizontal';

Component layout, either vertical or horizontal.
"vertical"

property title

title?: React.ReactNode;

The title of the non-ideal state.

interface NumericInputProps

interface NumericInputProps extends InputSharedProps {}

property allowNumericCharactersOnly

allowNumericCharactersOnly?: boolean;

Whether to allow only floating-point number characters in the field, mimicking the native input[type="number"].
true

property asyncControl

asyncControl?: boolean;

Set this to true if you will be controlling the value of this input with asynchronous updates. These may occur if you do not immediately call setState in a parent component with the value from the onChange handler.

property buttonPosition

buttonPosition?: typeof Position.LEFT | typeof Position.RIGHT | 'none';

The position of the buttons with respect to the input field.
Position.RIGHT

property clampValueOnBlur

clampValueOnBlur?: boolean;

Whether the value should be clamped to [min, max] on blur. The value will be clamped to each bound only if the bound is defined. Note that native input[type="number"] controls do *NOT* clamp on blur.
false

property defaultValue

defaultValue?: number | string;

In uncontrolled mode, this sets the default value of the input. Note that this value is only used upon component instantiation and changes to this prop during the component lifecycle will be ignored.
""

property inputSize

inputSize?: HTMLInputProps['size'];

Alias for the native HTML input size attribute. see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/size

property large

large?: boolean;

If set to true, the input will display with larger styling. This is equivalent to setting Classes.LARGE via className on the parent control group and on the child input group.
Deprecated
use size="large" instead false

property locale

locale?: string;

The locale name, which is passed to the component to format the number and allowing to type the number in the specific locale. [See MDN documentation for more info about browser locale identification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
""

property majorStepSize

majorStepSize?: number | null;

The increment between successive values when shift is held. Pass explicit null value to disable this interaction.
10

property max

max?: number;

The maximum value of the input.

property min

min?: number;

The minimum value of the input.

property minorStepSize

minorStepSize?: number | null;

The increment between successive values when alt is held. Pass explicit null value to disable this interaction.
0.1

property selectAllOnFocus

selectAllOnFocus?: boolean;

Whether the entire text field should be selected on focus.
false

property selectAllOnIncrement

selectAllOnIncrement?: boolean;

Whether the entire text field should be selected on increment.
false

property size

size?: Size | HTMLInputProps['size'];

Size of the input. If given a numeric value, and inputSize is not defined, then this will be provided as the size attribute for the underyling native HTML input element. Passing a numeric value this way is deprecated, use the inputSize prop instead.
"medium"

property small

small?: boolean;

If set to true, the input will display with smaller styling. This is equivalent to setting Classes.SMALL via className on the parent control group and on the child input group.
Deprecated
use size="small" instead false

property stepSize

stepSize?: number;

The increment between successive values when no modifier keys are held.
1

property value

value?: number | string;

The value to display in the input field.

method onButtonClick

onButtonClick: (valueAsNumber: number, valueAsString: string) => void;

The callback invoked when the value changes due to a button click.

method onValueChange

onValueChange: (
    valueAsNumber: number,
    valueAsString: string,
    inputElement: HTMLInputElement | null
) => void;

The callback invoked when the value changes due to typing, arrow keys, or button clicks.

interface OptionProps

interface OptionProps<T extends string | number = string | number> extends Props {}

property disabled

disabled?: boolean;

Whether this option is non-interactive.

property label

label?: string;

Label text for this option. If omitted, value is used as the label.

property value

value: T;

Value of this option.

interface OverflowListProps

interface OverflowListProps<T> extends Props {}

property alwaysRenderOverflow

alwaysRenderOverflow?: boolean;

Whether to force the overflowRenderer to always be called, even if there are zero items overflowing. This may be useful, for example, if your overflow renderer contains a Popover which you do not want to close as the list is resized.
false

property collapseFrom

collapseFrom?: Boundary;

Which direction the items should collapse from: start or end of the children. This also determines whether overflowRenderer appears before (START) or after (END) the visible items.
Boundary.START

property items

items: readonly T[];

All items to display in the list. Items that do not fit in the container will be rendered in the overflow instead.

property minVisibleItems

minVisibleItems?: number;

The minimum number of visible items that should never collapse into the overflow menu, regardless of DOM dimensions.
0

property observeParents

observeParents?: boolean;

If true, all parent DOM elements of the container will also be observed. If changes to a parent's size is detected, the overflow will be recalculated.
Only enable this prop if the overflow should be recalculated when a parent element resizes in a way that does not also cause the OverflowList to resize.
false

property onOverflow

onOverflow?: (overflowItems: T[]) => void;

Callback invoked when the overflowed items change. This is called once after the DOM has settled, rather that on every intermediate change. It is not invoked if resizing produces an unchanged overflow state.

property overflowRenderer

overflowRenderer: (overflowItems: T[]) => React.ReactNode;

Callback invoked to render the overflowed items. Unlike visibleItemRenderer, this prop is invoked once with all items that do not fit in the container.
Typical use cases for this prop will put overflowed items in a dropdown menu or display a "+X items" label.

property style

style?: React.CSSProperties;

CSS properties to apply to the root element.

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

HTML tag name for the container element.
"div"

property visibleItemRenderer

visibleItemRenderer: (item: T, index: number) => React.ReactNode;

Callback invoked to render each visible item. Remember to set a key on the rendered element!

interface Overlay2Props

interface Overlay2Props extends OverlayProps, React.RefAttributes<OverlayInstance> {}

property childRef

childRef?: React.RefObject<HTMLElement>;

If you provide a single child element to Overlay2 and attach your own ref to the node, you must pass the same value here (otherwise, Overlay2 won't be able to render CSSTransition correctly).
Mutually exclusive with the childRefs prop. This prop is a shorthand for childRefs={{ [key: string]: ref }}.

property childRefs

childRefs?: Record<string, React.RefObject<HTMLElement>>;

If you provide a _multiple child elements_ to Overlay2, you must enumerate and generate a collection of DOM refs to those elements and provide it here. The object's keys must correspond to the child React element key values.
Mutually exclusive with the childRef prop. If you only provide a single child element, consider using childRef instead.

interface OverlayableProps

interface OverlayableProps extends OverlayLifecycleProps {}

property autoFocus

autoFocus?: boolean;

Whether the overlay should acquire application focus when it first opens.
true

property canEscapeKeyClose

canEscapeKeyClose?: boolean;

Whether pressing the esc key should invoke onClose.
true

property enforceFocus

enforceFocus?: boolean;

Whether the overlay should prevent focus from leaving itself. That is, if the user attempts to focus an element outside the overlay and this prop is enabled, then the overlay will immediately bring focus back to itself. If you are nesting overlay components, either disable this prop on the "outermost" overlays or mark the nested ones usePortal={false}.
true

property lazy

lazy?: boolean;

If true and usePortal={true}, the Portal containing the children is created and attached to the DOM when the overlay is opened for the first time; otherwise this happens when the component mounts. Lazy mounting provides noticeable performance improvements if you have lots of overlays at once, such as on each row of a table.
true

property onClose

onClose?: (event: React.SyntheticEvent<HTMLElement>) => void;

A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the esc key (if enabled).
Receives the event from the user's interaction, if there was an event (generally either a mouse or key event). Note that, since this component is controlled by the isOpen prop, it will not actually close itself until that prop becomes false.

property portalClassName

portalClassName?: string;

Space-delimited string of class names applied to the Portal element if usePortal={true}.

property portalContainer

portalContainer?: HTMLElement;

The container element into which the overlay renders its contents, when usePortal is true. This prop is ignored if usePortal is false.
document.body

property portalStopPropagationEvents

portalStopPropagationEvents?: Array<keyof HTMLElementEventMap>;

A list of DOM events which should be stopped from propagating through the Portal. This prop is ignored if usePortal is false.
See Also
- https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
- https://github.com/palantir/blueprint/issues/6124
- https://github.com/palantir/blueprint/issues/6580
Deprecated
this prop's implementation no longer works in React v17+

property shouldReturnFocusOnClose

shouldReturnFocusOnClose?: boolean;

Whether the application should return focus to the last active element in the document after this overlay closes.
true

property transitionDuration

transitionDuration?: number;

Indicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React CSSTransition to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
300

property usePortal

usePortal?: boolean;

Whether the overlay should be wrapped in a Portal, which renders its contents in a new element attached to portalContainer prop.
This prop essentially determines which element is covered by the backdrop: if false, then only its parent is covered; otherwise, the entire page is covered (because the parent of the Portal is the <body> itself).
Set this prop to false on nested overlays (such as Dialog or Popover) to ensure that they are rendered above their parents.
true

interface OverlayInstance

interface OverlayInstance {}

Public instance properties & methods for an overlay in the current overlay stack.

property bringFocusInsideOverlay

bringFocusInsideOverlay?: () => void;

Bring document focus inside this overlay element. This should be defined if props.enforceFocus={true} or props.autoFocus={true}.

property containerElement

containerElement: React.RefObject<HTMLDivElement>;

Reference to the overlay container element which may or may not be in a Portal.

property handleDocumentFocus

handleDocumentFocus?: (e: FocusEvent) => void;

Document "focus" event handler which needs to be attached & detached appropriately. This should be defined if props.enforceFocus={true}.

property handleDocumentMousedown

handleDocumentMousedown?: (e: MouseEvent) => void;

Document "mousedown" event handler which needs to be attached & detached appropriately. This should be defined if props.canOutsideClickClose={true} and props.hasBackdrop={false}.

property id

id: string;

Unique ID for this overlay which helps to identify it across prop changes.

property props

props: Pick<
    OverlayProps,
    'autoFocus' | 'enforceFocus' | 'usePortal' | 'hasBackdrop'
>;

Subset of props necessary for some overlay stack focus management logic.

interface OverlayLifecycleProps

interface OverlayLifecycleProps {}

property onClosed

onClosed?: (node: HTMLElement) => void;

Lifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed.

property onClosing

onClosing?: (node: HTMLElement) => void;

Lifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed.

property onOpened

onOpened?: (node: HTMLElement) => void;

Lifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened.

property onOpening

onOpening?: (node: HTMLElement) => void;

Lifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened.

interface OverlayProps

interface OverlayProps extends OverlayableProps, BackdropProps, Props {}

property children

children?: React.ReactNode;

Element to overlay.

property isOpen

isOpen: boolean;

Toggles the visibility of the overlay and its children. This prop is required because the component is controlled.

property transitionName

transitionName?: string;

Name of the transition for internal CSSTransition. Providing your own name here will require defining new CSS transition properties.
Classes.OVERLAY

interface OverlaysContextState

interface OverlaysContextState {}

property hasProvider

hasProvider: boolean;

Whether the context instance is being used within a tree which has an <OverlaysProvider>. useOverlayStack() will work if this is false in Blueprint v5, but this will be unsupported in Blueprint v6; all applications with overlays will be required to configure a provider to manage global overlay state.
See Also
- https://github.com/palantir/blueprint/wiki/Overlay2-migration

property stack

stack: React.MutableRefObject<OverlayInstance[]>;

The application-wide global overlay stack.

interface OverlaysProviderProps

interface OverlaysProviderProps {}

property children

children: React.ReactNode;

The component subtree which will have access to this overlay stack context.

interface OverlayToasterProps

interface OverlayToasterProps extends Props {}

Props supported by the <OverlayToaster> component. These props can be passed as an argument to the static Toaster.create(props?, container?) method.

property autoFocus

autoFocus?: boolean;

Whether a toast should acquire application focus when it first opens. This is disabled by default so that toasts do not interrupt the user's flow. Note that enforceFocus is always disabled for Toasters.
false

property canEscapeKeyClear

canEscapeKeyClear?: boolean;

Whether pressing the esc key should clear all active toasts.
true

property children

children?: React.ReactNode;

Toasts to display inside the Overlay2.

property maxToasts

maxToasts?: number;

The maximum number of active toasts that can be displayed at once.
When the limit is about to be exceeded, the oldest active toast is removed.
undefined

property position

position?: ToasterPosition;

Position of Toaster within its container.
Position.TOP

property usePortal

usePortal?: boolean;

Whether the toaster should be rendered into a new element attached to document.body. If false, then positioning will be relative to the parent element.
This prop is ignored by Toaster.create() as that method always appends a new element to the container.
true

interface Panel

interface Panel<P> {}

An object describing a panel in a PanelStack2.

property htmlTitle

htmlTitle?: string;

HTML title to be passed to the component

property props

props?: P;

The props passed to the component type when it is rendered. The methods in PanelActions will be injected by PanelStack2.

property renderPanel

renderPanel: React.FC<PanelProps<P>>;

The renderer for this panel.

property title

title?: React.ReactNode;

The title to be displayed above this panel. It is also used as the text of the back button for any panel opened by this panel.

interface PanelStack2Props

interface PanelStack2Props<T extends Panel<object>> extends Props {}

T type union of all possible panels in this stack

property initialPanel

initialPanel?: T;

The initial panel to show on mount. This panel cannot be removed from the stack and will appear when the stack is empty. This prop is only used in uncontrolled mode and is thus mutually exclusive with the stack prop.

property onClose

onClose?: (removedPanel: T) => void;

Callback invoked when the user presses the back button or a panel closes itself with a closePanel() action.

property onOpen

onOpen?: (addedPanel: T) => void;

Callback invoked when a panel opens a new panel with an openPanel(panel) action.

property renderActivePanelOnly

renderActivePanelOnly?: boolean;

If false, PanelStack will render all panels in the stack to the DOM, allowing their React component trees to maintain state as a user navigates through the stack. Panels other than the currently active one will be invisible.
true

property showPanelHeader

showPanelHeader?: boolean;

Whether to show the header with the "back" button in each panel.
true

property stack

stack?: readonly T[];

The full stack of panels in controlled mode. The last panel in the stack will be displayed.

interface PanelStackProps

interface PanelStackProps extends Props {}

property initialPanel

initialPanel?: IPanel<any>;

The initial panel to show on mount. This panel cannot be removed from the stack and will appear when the stack is empty. This prop is only used in uncontrolled mode and is thus mutually exclusive with the stack prop.

property onClose

onClose?: (removedPanel: IPanel) => void;

Callback invoked when the user presses the back button or a panel invokes the closePanel() injected prop method.

property onOpen

onOpen?: (addedPanel: IPanel) => void;

Callback invoked when a panel invokes the openPanel(panel) injected prop method.

property renderActivePanelOnly

renderActivePanelOnly?: boolean;

If false, PanelStack will render all panels in the stack to the DOM, allowing their React component trees to maintain state as a user navigates through the stack. Panels other than the currently active one will be invisible.
true

property showPanelHeader

showPanelHeader?: boolean;

Whether to show the header with the "back" button in each panel.
true

property stack

stack?: Array<IPanel<any>>;

The full stack of panels in controlled mode. The last panel in the stack will be displayed.

interface PopoverProps

interface PopoverProps<
    TProps extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps
> extends PopoverSharedProps<TProps> {}

property autoFocus

autoFocus?: boolean;

Whether the popover/tooltip should acquire application focus when it first opens.
true for click interactions, false for hover interactions

property backdropProps

backdropProps?: React.HTMLProps<HTMLDivElement>;

HTML props for the backdrop element. Can be combined with backdropClassName.

property hasBackdrop

hasBackdrop?: boolean;

Enables an invisible overlay beneath the popover that captures clicks and prevents interaction with the rest of the document until the popover is closed. This prop is only available when interactionKind is PopoverInteractionKind.CLICK. When popovers with backdrop are opened, they become focused.
false

property interactionKind

interactionKind?: PopoverInteractionKind;

The kind of interaction that triggers the display of the popover.
"click"

property popupKind

popupKind?: PopupKind;

The kind of popup displayed by the popover. Gets directly applied to the aria-haspopup attribute of the target element. This property is ignored if interactionKind is PopoverInteractionKind.HOVER_TARGET_ONLY.
"menu" or undefined

property positioningStrategy

positioningStrategy?: PositioningStrategy;

Popper.js positioning strategy.
See Also
- https://popper.js.org/docs/v2/constructors/#strategy "absolute"

property shouldReturnFocusOnClose

shouldReturnFocusOnClose?: boolean;

Whether the application should return focus to the last active element in the document after this popover closes.
This is automatically set (overridden) to: - false for hover interaction popovers - true when a popover closes due to an ESC keypress
If you are attaching a popover _and_ a tooltip to the same target, you must take care to either disable this prop for the popover _or_ disable the tooltip's openOnTargetFocus prop.
false

interface PopoverSharedProps

interface PopoverSharedProps<TProps extends DefaultPopoverTargetHTMLProps>
    extends OverlayableProps,
        Props {}

Props shared between Popover and Tooltip.
TProps HTML props interface for target element, defaults to props for HTMLElement in IPopoverProps and ITooltipProps

property boundary

boundary?: Boundary;

A boundary element supplied to the "flip" and "preventOverflow" modifiers. This is a shorthand for overriding Popper.js modifier options with the modifiers prop.
See Also
- https://popper.js.org/docs/v2/utils/detect-overflow/#boundary

property captureDismiss

captureDismiss?: boolean;

When enabled, clicks inside a Classes.POPOVER_DISMISS element will only close the current popover and not outer popovers. When disabled, the current popover and any ancestor popovers will be closed.
See Also
- http://blueprintjs.com/docs/#core/components/popover.closing-on-click false

property children

children?: React.ReactNode;

Interactive element which will trigger the popover.

property content

content?: string | React.JSX.Element;

The content displayed inside the popover.

property defaultIsOpen

defaultIsOpen?: boolean;

Initial opened state when uncontrolled.
false

property disabled

disabled?: boolean;

Prevents the popover from appearing when true.
false

property fill

fill?: boolean;

Whether the wrapper and target should take up the full width of their container. Note that supplying true for this prop will force targetTagName="div".

property hoverCloseDelay

hoverCloseDelay?: number;

The amount of time in milliseconds the popover should remain open after the user hovers off the trigger. The timer is canceled if the user mouses over the target before it expires.
300

property hoverOpenDelay

hoverOpenDelay?: number;

The amount of time in milliseconds the popover should wait before opening after the user hovers over the trigger. The timer is canceled if the user mouses away from the target before it expires.
150

property inheritDarkTheme

inheritDarkTheme?: boolean;

Whether a popover that uses a Portal should automatically inherit the dark theme from its parent.
true

property isOpen

isOpen?: boolean;

Whether the popover is visible. Passing this prop puts the popover in controlled mode, where the only way to change visibility is by updating this property. If disabled={true}, this prop will be ignored, and the popover will remain closed.
undefined

property matchTargetWidth

matchTargetWidth?: boolean;

Whether the popover content should be sized to match the width of the target. This is sometimes useful for dropdown menus. This prop is implemented using a Popper.js custom modifier.
false

property minimal

minimal?: boolean;

Whether to apply minimal styling to this popover or tooltip. Minimal popovers do not have an arrow pointing to their target and use a subtler animation.
false

property modifiers

modifiers?: PopperModifierOverrides;

Overrides for Popper.js built-in modifiers. Each override is is a full modifier object (omitting its name), keyed by its modifier name.
For example, the arrow modifier can be disabled by providing { arrow: { enabled: false } }.
Some of Popover's default modifiers may get disabled under certain circumstances, but you may choose to re-enable and customize them. For example, "offset" is disabled when minimal={true}, but you can re-enable it with { offset: { enabled: true } }.
See Also
- https://popper.js.org/docs/v2/modifiers/

property modifiersCustom

modifiersCustom?: readonly PopperCustomModifier[];

Custom modifiers to add to the popper instance.
See Also
- https://popper.js.org/docs/v2/modifiers/#custom-modifiers

property onInteraction

onInteraction?: (
    nextOpenState: boolean,
    e?: React.SyntheticEvent<HTMLElement>
) => void;

Callback invoked in controlled mode when the popover open state *would* change due to user interaction.

property openOnTargetFocus

openOnTargetFocus?: boolean;

Whether the popover should open when its target is focused. If true, target will render with tabindex="0" to make it focusable via keyboard navigation.
Note that this functionality is only enabled for hover interaction popovers/tooltips.
true

property placement

placement?: Placement;

The placement (relative to the target) at which the popover should appear. Mutually exclusive with position prop. Prefer using this over position, as it more closely aligns with Popper.js semantics.
The default value of "auto" will choose the best placement when opened and will allow the popover to reposition itself to remain onscreen as the user scrolls around.
"auto"

property popoverClassName

popoverClassName?: string;

A space-delimited string of class names applied to the popover element.

property popoverRef

popoverRef?: React.Ref<HTMLElement>;

DOM ref attached to the Classes.POPOVER element.

property position

position?: PopoverPosition;

The position (relative to the target) at which the popover should appear. Mutually exclusive with placement prop.
The default value of "auto" will choose the best position when opened and will allow the popover to reposition itself to remain onscreen as the user scrolls around.
"auto"

property renderTarget

renderTarget?: (
    props: PopoverTargetProps &
        PopoverHoverTargetHandlers<TProps> &
        PopoverClickTargetHandlers<TProps>
) => React.JSX.Element;

Target renderer which receives props injected by Popover which should be spread onto the rendered element. This function should return a single React node.
Mutually exclusive with children and targetTagName props.

property rootBoundary

rootBoundary?: RootBoundary;

A root boundary element supplied to the "flip" and "preventOverflow" modifiers. This is a shorthand for overriding Popper.js modifier options with the modifiers prop.
See Also
- https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary

property targetProps

targetProps?: TProps;

HTML props for the target element. This is useful in some cases where you need to render some simple attributes on the generated target element.
For more complex use cases, consider using the renderTarget API instead. This prop will be ignored if renderTarget is used.

property targetTagName

targetTagName?: keyof React.JSX.IntrinsicElements;

HTML tag name for the target element. This must be an HTML element to ensure that it supports the necessary DOM event handlers.
By default, a <span> tag is used so popovers appear as inline-block elements and can be nested in text. Use <div> tag for a block element.
If fill is set to true, this prop's default value will become "div" instead of "span".
Note that _not all HTML tags are supported_; you will need to make sure the tag you choose supports the HTML attributes Popover applies to the target element.
This prop is mutually exclusive with the renderTarget API.
"span" ("div" if fill={true})

property usePortal

usePortal?: boolean;

Whether the popover should be rendered inside a Portal attached to portalContainer prop.
Rendering content inside a Portal allows the popover content to escape the physical bounds of its parent while still being positioned correctly relative to its target. Using a Portal is necessary if any ancestor of the target hides overflow or uses very complex positioning.
Not using a Portal can result in smoother performance when scrolling and allows the popover content to inherit CSS styles from surrounding elements, but it remains subject to the overflow bounds of its ancestors.
true

interface PopoverTargetProps

interface PopoverTargetProps
    extends Pick<
        React.HTMLAttributes<HTMLElement>,
        'aria-haspopup' | 'aria-expanded' | 'className' | 'tabIndex'
    > {}

Properties injected by Popover when rendering custom targets via the renderTarget API.
See Also
- https://blueprintjs.com/docs/#core/components/popover.structure

property isOpen

isOpen: boolean;

Whether the popover or tooltip is currently open.

property ref

ref: React.Ref<any>;

Target ref.

interface PortalContextOptions

interface PortalContextOptions {}

property portalClassName

portalClassName?: string;

Additional CSS classes to add to all Portal elements in this React context.

property portalContainer

portalContainer?: HTMLElement;

The HTML element that all Portal elements in this React context will be added as children to

interface PortalLegacyContext

interface PortalLegacyContext {}

property blueprintPortalClassName

blueprintPortalClassName?: string;

Additional CSS classes to add to all Portal elements in this React context.

interface PortalProps

interface PortalProps extends Props {}

property children

children: React.ReactNode;

Contents to send through the portal.

property container

container?: HTMLElement;

The HTML element that children will be mounted to.
PortalProvider#portalContainer ?? document.body

property onChildrenMount

onChildrenMount?: () => void;

Callback invoked when the children of this Portal have been added to the DOM.

property stopPropagationEvents

stopPropagationEvents?: Array<keyof HTMLElementEventMap>;

A list of DOM events which should be stopped from propagating through this portal element.
See Also
- https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
- https://github.com/palantir/blueprint/issues/6124
- https://github.com/palantir/blueprint/issues/6580
Deprecated
this prop's implementation no longer works in React v17+

interface ProgressBarProps

interface ProgressBarProps extends Props, IntentProps, HTMLDivProps {}

property animate

animate?: boolean;

Whether the background should animate.
true

property stripes

stripes?: boolean;

Whether the background should be striped.
true

property value

value?: number;

A value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1, respectively. Omitting this prop will result in an "indeterminate" progress meter that fills the entire bar.

interface Props

interface Props {}

A shared base interface for all Blueprint component props.

property className

className?: string;

A space-delimited list of class names to pass along to a child element.

interface RadioGroupProps

interface RadioGroupProps extends Props, HTMLDivProps {}

property children

children?: React.ReactNode;

Radio elements. This prop is mutually exclusive with options. If passing custom children, ensure options have role="radio" or input with type="radio".

property disabled

disabled?: boolean;

Whether the group and _all_ its radios are disabled. Individual radios can be disabled using their disabled prop.

property inline

inline?: boolean;

Whether the radio buttons are to be displayed inline horizontally.

property label

label?: React.ReactNode;

Optional label text to display above the radio buttons.

property name

name?: string;

Name of the group, used to link radio buttons together in HTML. If omitted, a unique name will be generated internally.

property onChange

onChange: (event: React.FormEvent<HTMLInputElement>) => void;

Callback invoked when the currently selected radio changes. Use event.currentTarget.value to read the currently selected value. This prop is required because this component only supports controlled usage.

property options

options?: readonly OptionProps[];

Array of options to render in the group. This prop is mutually exclusive with children: either provide an array of OptionProps objects or provide <Radio> children elements.

property selectedValue

selectedValue?: string | number;

Value of the selected radio. The child with this value will be :checked.

interface RangeSliderProps

interface RangeSliderProps extends SliderBaseProps {}

property handleHtmlProps

handleHtmlProps?: {
    start?: HandleHtmlProps;
    end?: HandleHtmlProps;
};

HTML props to apply to the slider Handles

property value

value?: NumberRange;

Range value of slider. Handles will be rendered at each position in the range.
[0, 10]

method onChange

onChange: (value: NumberRange) => void;

Callback invoked when the range value changes.

method onRelease

onRelease: (value: NumberRange) => void;

Callback invoked when a handle is released.

interface ResizeSensorProps

interface ResizeSensorProps {}

ResizeSensor requires a single DOM element child and will error otherwise.

property children

children: React.JSX.Element;

Single child, must be an element and not a string or fragment.

property observeParents

observeParents?: boolean;

If true, all parent DOM elements of the container will also be observed for size changes. The array of entries passed to onResize will now contain an entry for each parent element up to the root of the document.
Only enable this prop if a parent element resizes in a way that does not also cause the child element to resize.
false

property onResize

onResize: (entries: ResizeObserverEntry[]) => void;

Callback invoked when the wrapped element resizes.
The entries array contains an entry for each observed element. In the default case (no observeParents), the array will contain only one element: the single child of the ResizeSensor.
Note that this method is called _asynchronously_ after a resize is detected and typically it will be called no more than once per frame.

property targetRef

targetRef?: React.RefObject<HTMLElement>;

If you attach a ref to the child yourself when rendering it, you must pass the same value here (otherwise, ResizeSensor won't be able to attach its own).

interface SectionCardProps

interface SectionCardProps
    extends Props,
        HTMLDivProps,
        React.RefAttributes<HTMLDivElement> {}

property padded

padded?: boolean;

Whether to apply visual padding inside the content container element.
true

interface SectionProps

interface SectionProps
    extends Props,
        Omit<HTMLDivProps, 'title'>,
        React.RefAttributes<HTMLDivElement> {}

property collapseProps

collapseProps?: SectionCollapseProps;

Subset of props to forward to the underlying Collapse component, with the addition of a defaultIsOpen option which sets the default open state of the component when in uncontrolled mode.

property collapsible

collapsible?: boolean;

Whether this section's contents should be collapsible.
false

property compact

compact?: boolean;

Whether this section should use compact styles.
false

property elevation

elevation?: SectionElevation;

Visual elevation of this container element.
Elevation.ZERO

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render in the section's header. Note that the header will only be rendered if title is provided.

property rightElement

rightElement?: React.JSX.Element;

Element to render on the right side of the section header. Note that the header will only be rendered if title is provided.

property subtitle

subtitle?: React.JSX.Element | string;

Sub-title of the section. Note that the header will only be rendered if title is provided.

property title

title?: React.JSX.Element | string;

Title of the section. Note that the header will only be rendered if title is provided.

property titleRenderer

titleRenderer?: React.FC<React.HTMLAttributes<HTMLElement>>;

Optional title renderer function. If provided, it is recommended to include a Blueprint <H6> element as part of the title. The render function is supplied with className and id attributes which you must forward to the DOM. The title prop is also passed along to this renderer via props.children.
H6

interface SegmentedControlProps

interface SegmentedControlProps
    extends Props,
        ControlledValueProps<string>,
        React.RefAttributes<HTMLDivElement> {}

SegmentedControl component props.

property fill

fill?: boolean;

Whether the control should take up the full width of its container.
false

property inline

inline?: boolean;

Whether the control should appear as an inline element.

property intent

intent?: SegmentedControlIntent;

Visual intent to apply to the selected value.

property large

large?: boolean;

Whether this control should use large buttons.
Deprecated
use size="large" instead. false

property options

options: SegmentedControlOptionProps[];

List of available options.

property role

role?: Extract<React.AriaRole, 'radiogroup' | 'group' | 'toolbar' | 'menu'>;

Aria role for the overall component (container). Child buttons get appropriate roles: - "radiogroup" -> "radio" - "group" -> "button" - "toolbar" -> "button" - "menu" -> "menuitemradio"
See Also
- https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar
  'radiogroup'

property size

size?: Size;

The size of the control.
"medium"

property small

small?: boolean;

Whether this control should use small buttons.
Deprecated
use size="small" instead. false

interface ShowContextMenuOptions

interface ShowContextMenuOptions {}

Options for specifying how an imperatively created context menu should be rendered to the DOM.

property container

container?: HTMLElement;

A new DOM element will be created and appended to this container.
document.body

property render

render: ShowContextMenuDOMRenderer;

A function render the React component onto a newly created DOM element. This should return a function which unmounts the rendered element from the DOM.

interface SliderBaseProps

interface SliderBaseProps extends Props, IntentProps {}

property children

children?: React.ReactNode;

property disabled

disabled?: boolean;

Whether the slider is non-interactive.
false

property labelPrecision

labelPrecision?: number;

Number of decimal places to use when rendering label value. Default value is the number of decimals used in the stepSize prop. This prop has _no effect_ if you supply a custom labelRenderer callback.
inferred from stepSize

property labelRenderer

labelRenderer?:
    | boolean
    | ((
          value: number,
          opts?: {
              isHandleTooltip: boolean;
          }
      ) => string | React.JSX.Element);

Callback to render a single label. Useful for formatting numbers as currency or percentages. If true, labels will use number value formatted to labelPrecision decimal places. If false, labels will not be shown.
The callback is provided a numeric value and optional rendering options, which include: - isHandleTooltip: whether this label is being rendered within a handle tooltip
true

property labelStepSize

labelStepSize?: number;

Increment between successive labels. Must be greater than zero.
inferred (if labelStepSize is undefined)

property labelValues

labelValues?: readonly number[];

Array of specific values for the label placement. This prop is mutually exclusive with labelStepSize.

property max

max?: number;

Maximum value of the slider. Value must be a finite number.
10

property min

min?: number;

Minimum value of the slider. Value must be a finite number.
0

property showTrackFill

showTrackFill?: boolean;

Whether a solid bar should be rendered on the track between current and initial values, or between handles for RangeSlider.
true

property stepSize

stepSize?: number;

Increment between successive values; amount by which the handle moves. Must be greater than zero.
1

property vertical

vertical?: boolean;

Whether to show the slider in a vertical orientation.
false

interface SliderProps

interface SliderProps extends SliderBaseProps {}

property handleHtmlProps

handleHtmlProps?: HandleHtmlProps;

A limited subset of HTML props to apply to the slider Handle

property initialValue

initialValue?: number;

Initial value of the slider. This determines the other end of the track fill: from initialValue to value.
0

property value

value?: number;

Value of slider.
0

method onChange

onChange: (value: number) => void;

Callback invoked when the value changes.

method onRelease

onRelease: (value: number) => void;

Callback invoked when the handle is released.

interface SpinnerProps

interface SpinnerProps<T extends HTMLElement = HTMLElement>
    extends Props,
        IntentProps,
        React.HTMLAttributes<T> {}

property size

size?: number;

Width and height of the spinner in pixels. The size cannot be less than 10px.
Constants are available for common sizes: - SpinnerSize.SMALL = 20px - SpinnerSize.STANDARD = 50px - SpinnerSize.LARGE = 100px
SpinnerSize.STANDARD = 50

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

HTML tag for the two wrapper elements. If rendering a <Spinner> inside an <svg>, change this to an SVG element like "g".
"div"

property value

value?: number;

A value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1 respectively. Omitting this prop will result in an "indeterminate" spinner where the head spins indefinitely.

interface SwitchProps

interface SwitchProps extends ControlProps {}

Switch component props.

property innerLabel

innerLabel?: string;

Text to display inside the switch indicator when unchecked.

property innerLabelChecked

innerLabelChecked?: string;

Text to display inside the switch indicator when checked. If innerLabel is provided and this prop is omitted, then innerLabel will be used for both states.
innerLabel

interface TabPanelProps

interface TabPanelProps
    extends Pick<TabProps, 'className' | 'id' | 'panel'>,
        Pick<TabsProps, 'renderActiveTabPanelOnly' | 'selectedTabId'>,
        Pick<TabTitleProps, 'parentId'> {}

property selectedTabId

selectedTabId: TabId | undefined;

Used for setting visibility. This TabPanel will be visibile when selectedTabId === id, with proper accessibility attributes set.

interface TabProps

interface TabProps extends Props, Omit<HTMLDivProps, 'id' | 'title' | 'onClick'> {}

property children

children?: React.ReactNode;

Content of tab title, rendered in a list above the active panel. Can also be set via the title prop.

property disabled

disabled?: boolean;

Whether the tab is disabled.
false

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render before the children.

property id

id: TabId;

Unique identifier used to control which tab is selected and to generate ARIA attributes for accessibility.

property panel

panel?: React.JSX.Element | ((props: TabIdProps) => React.JSX.Element);

Panel content, rendered by the parent Tabs when this tab is active. If omitted, no panel will be rendered for this tab. Can either be an element or a renderer.

property panelClassName

panelClassName?: string;

Space-delimited string of class names applied to tab panel container.

property tagContent

tagContent?: TagProps['children'];

Content to render inside a <Tag> after the children. The tag is minimal by default; it can be further modified by using tagProps.

property tagProps

tagProps?: Omit<TagProps, 'children'>;

Props to customize the <Tag> rendered after the children. This has no effect if tagContent is undefined.

property title

title?: React.ReactNode;

Content of tab title element, rendered in a list above the active panel. Can also be set via React children.

interface TabsProps

interface TabsProps extends Props {}

property animate

animate?: boolean;

Whether the selected tab indicator should animate its movement.
true

property children

children?: React.ReactNode;

Tab elements.

property defaultSelectedTabId

defaultSelectedTabId?: TabId;

Initial selected tab id, for uncontrolled usage. Note that this prop refers only to <Tab> children; other types of elements are ignored.
first tab

property fill

fill?: boolean;

Whether to make the tabs list fill the height of its parent.
This has no effect when vertical={true}. This is not recommended when tab panels are defined within this component subtree, as the height computation will include the panel height, which is usually not intended. Instead, it works well if the panels are rendered elsewhere in the React tree.
false

property id

id: TabId;

Unique identifier for this Tabs container. This will be combined with the id of each Tab child to generate ARIA accessibility attributes. IDs are required and should be unique on the page to support server-side rendering.

property large

large?: boolean;

If set to true, the tab titles will display with larger styling. This will apply large styles only to the tabs at this level, not to nested tabs.
Deprecated
use size="large" instead false

property renderActiveTabPanelOnly

renderActiveTabPanelOnly?: boolean;

Whether inactive tab panels should be removed from the DOM and unmounted in React. This can be a performance enhancement when rendering many complex panels, but requires careful support for unmounting and remounting.
false

property selectedTabId

selectedTabId?: TabId;

Selected tab id, for controlled usage. Providing this prop will put the component in controlled mode. Unknown ids will result in empty selection (no errors).

property size

size?: NonSmallSize;

The size of the tab titles.
"medium"

property vertical

vertical?: boolean;

Whether to show tabs stacked vertically on the left side.
false

method onChange

onChange: (
    newTabId: TabId,
    prevTabId: TabId | undefined,
    event: React.MouseEvent<HTMLElement>
) => void;

A callback function that is invoked when a tab in the tab list is clicked.

interface TagInputProps

interface TagInputProps extends IntentProps, Props {}

property addOnBlur

addOnBlur?: boolean;

If true, onAdd will be invoked when the input loses focus. Otherwise, onAdd is only invoked when enter is pressed.
false

property addOnPaste

addOnPaste?: boolean;

If true, onAdd will be invoked when the user pastes text containing the separator into the input. Otherwise, pasted text will remain in the input.
__Note:__ For example, if addOnPaste=true and separator="\n" (new line), then: - Pasting "hello" will _not_ invoke onAdd - Pasting "hello\n" will invoke onAdd with ["hello"] - Pasting "hello\nworld" will invoke onAdd with ["hello", "world"]
true

property autoResize

autoResize?: boolean;

Whether the component should automatically resize as a user types in the text input. This will have no effect when fill={true}.
false

property children

children?: React.ReactNode;

Optional child elements which will be rendered between the selected tags and the text input. Rendering children is usually unnecessary.
undefined

property disabled

disabled?: boolean;

Whether the component is non-interactive. Note that you'll also need to disable the component's rightElement, if appropriate.
false

property fill

fill?: boolean;

Whether the tag input should take up the full width of its container.

property inputProps

inputProps?: HTMLInputProps;

React props to pass to the <input> element. Note that ref and key are not supported here; use inputRef below. Also note that inputProps.style.width will be overriden if autoResize={true}.

property inputRef

inputRef?: React.Ref<HTMLInputElement>;

Ref handler for the <input> element.

property inputValue

inputValue?: string;

Controlled value of the <input> element. This is shorthand for inputProps={{ value }}.

property large

large?: boolean;

Whether the tag input should use a large size.
Deprecated
use size="large" instead. false

property leftIcon

leftIcon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render on the left side of the input.

property onAdd

onAdd?: (values: string[], method: TagInputAddMethod) => boolean | void;

Callback invoked when new tags are added by the user pressing enter on the input. Receives the current value of the input field split by separator into an array. New tags are expected to be appended to the list.
The input will be cleared after onAdd is invoked _unless_ the callback explicitly returns false. This is useful if the provided value is somehow invalid and should not be added as a tag.

property onChange

onChange?: (values: React.ReactNode[]) => boolean | void;

Callback invoked when new tags are added or removed. Receives the updated list of values: new tags are appended to the end of the list, removed tags are removed at their index.
Like onAdd, the input will be cleared after this handler is invoked _unless_ the callback explicitly returns false.
This callback essentially implements basic onAdd and onRemove functionality and merges the two handlers into one to simplify controlled usage. ```

property onInputChange

onInputChange?: React.FormEventHandler<HTMLInputElement>;

Callback invoked when the value of <input> element is changed. This is shorthand for inputProps={{ onChange }}.

property onKeyDown

onKeyDown?: (event: React.KeyboardEvent<HTMLElement>, index?: number) => void;

Callback invoked when the user depresses a keyboard key. Receives the event and the index of the active tag (or undefined if focused in the input).

property onKeyUp

onKeyUp?: (event: React.KeyboardEvent<HTMLElement>, index?: number) => void;

Callback invoked when the user releases a keyboard key. Receives the event and the index of the active tag (or undefined if focused in the input).

property onRemove

onRemove?: (value: React.ReactNode, index: number) => void;

Callback invoked when the user clicks the X button on a tag. Receives value and index of removed tag.

property placeholder

placeholder?: string;

Input placeholder text which will not appear if values contains any items (consistent with default HTML input behavior). Use inputProps.placeholder if you want the placeholder text to _always_ appear.
If you define both placeholder and inputProps.placeholder, then the former will appear when values is empty and the latter at all other times.

property rightElement

rightElement?: React.JSX.Element;

Element to render on right side of input. For best results, use a small spinner or minimal button (button height will adjust if TagInput uses large styles). Other elements will likely require custom styles for correct positioning.

property separator

separator?: string | RegExp | false;

Separator pattern used to split input text into multiple values. Default value splits on commas and newlines. Explicit false value disables splitting (note that onAdd will still receive an array of length 1).
/[,\n\r]/

property size

size?: NonSmallSize;

The size of the tag input.
"medium"

property tagProps

tagProps?: TagProps | ((value: React.ReactNode, index: number) => TagProps);

React props to pass to each Tag. Provide an object to pass the same props to every tag, or a function to customize props per tag.
If you define onRemove here then you will have to implement your own tag removal handling as TagInput's own onRemove handler will never be invoked.

property values

values: readonly React.ReactNode[];

Controlled tag values. Each value will be rendered inside a Tag, which can be customized using tagProps. Therefore, any valid React node can be used as a TagInput value; falsy values will not be rendered.

interface TagProps

interface TagProps
    extends Props,
        IntentProps,
        TagSharedProps,
        React.RefAttributes<HTMLSpanElement>,
        React.HTMLAttributes<HTMLSpanElement> {}

property children

children?: React.ReactNode;

Child nodes which will be rendered inside a <Text> element.

property htmlTitle

htmlTitle?: string;

HTML title to be passed to the component

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render on the left side of the tag, before the child nodes.

property interactive

interactive?: boolean;

Whether the tag should visually respond to user interactions. If set to true, hovering over the tag will change its color and mouse cursor.
Tags will be marked as interactive automatically if an onClick handler is provided and this prop is not.
false

property multiline

multiline?: boolean;

Whether tag content should be allowed to occupy multiple lines. If false, a single line of text will be truncated with an ellipsis if it overflows. Note that icons will be vertically centered relative to multiline text.
false

property onRemove

onRemove?: (e: React.MouseEvent<HTMLButtonElement>, tagProps: TagProps) => void;

Click handler for remove button. The remove button will only be rendered if this prop is defined.

interface TextAreaProps

interface TextAreaProps
    extends IntentProps,
        Props,
        React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

property asyncControl

asyncControl?: boolean;

Set this to true if you will be controlling the value of this input with asynchronous updates. These may occur if you do not immediately call setState in a parent component with the value from the onChange handler, or if working with certain libraries like __redux-form__.
false

property autoResize

autoResize?: boolean;

Whether the component should automatically resize vertically as a user types in the text input. This will disable manual resizing in the vertical dimension.
false

property fill

fill?: boolean;

Whether the text area should take up the full width of its container.
false

property growVertically

growVertically?: boolean;

Whether the text area should automatically grow vertically to accomodate content.
Deprecated
use the autoResize prop instead.

property inputRef

inputRef?: React.Ref<HTMLTextAreaElement>;

Ref handler that receives HTML <textarea> element backing this component.

property large

large?: boolean;

Whether the text area should appear with large styling.
Deprecated
use size="large" instead. false

property size

size?: Size;

The size styling of the text area.
"medium"

property small

small?: boolean;

Whether the text area should appear with small styling.
Deprecated
use size="small" instead. false

interface TextProps

interface TextProps
    extends Props,
        React.RefAttributes<HTMLElement>,
        Omit<React.HTMLAttributes<HTMLElement>, 'title'> {}

property children

children?: React.ReactNode;

property ellipsize

ellipsize?: boolean;

Indicates that this component should be truncated with an ellipsis if it overflows its container. The title attribute will also be added when content overflows to show the full text of the children on hover.
false

property tagName

tagName?: keyof React.JSX.IntrinsicElements;

HTML tag name to use for rendered element.
"div"

property title

title?: string;

HTML title of the element

interface Toaster

interface Toaster {}

Instance methods available on a toaster component instance.

method clear

clear: () => void;

Dismiss all toasts instantly.

method dismiss

dismiss: (key: string) => void;

Dismiss the given toast instantly.

method getToasts

getToasts: () => ToastOptions[];

Returns the props for all current toasts.

method show

show: (props: ToastProps, key?: string) => string;

Shows a new toast to the user, or updates an existing toast corresponding to the provided key (optional).
Returns the unique key of the toast.

interface ToasterInstance

interface Toaster {}

Instance methods available on a toaster component instance.

method clear

clear: () => void;

Dismiss all toasts instantly.

method dismiss

dismiss: (key: string) => void;

Dismiss the given toast instantly.

method getToasts

getToasts: () => ToastOptions[];

Returns the props for all current toasts.

method show

show: (props: ToastProps, key?: string) => string;

Shows a new toast to the user, or updates an existing toast corresponding to the provided key (optional).
Returns the unique key of the toast.

interface ToastProps

interface ToastProps extends Props, IntentProps {}

property action

action?: ActionProps & LinkProps;

Action rendered as a minimal AnchorButton. The toast is dismissed automatically when the user clicks the action button. Note that the intent prop is ignored (the action button cannot have its own intent color that might conflict with the toast's intent). Omit this prop to omit the action button.

property icon

icon?: IconName | MaybeElement;

Name of a Blueprint UI icon (or an icon element) to render before the message.

property isCloseButtonShown

isCloseButtonShown?: boolean;

Whether to show the close button in the toast.
true

property message

message: React.ReactNode;

Message to display in the body of the toast.

property onDismiss

onDismiss?: (didTimeoutExpire: boolean) => void;

Callback invoked when the toast is dismissed, either by the user or by the timeout. The value of the argument indicates whether the toast was closed because the timeout expired.

property timeout

timeout?: number;

Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout (this is discouraged).
5000

interface TooltipProps

interface TooltipProps<
    TProps extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps
> extends Omit<PopoverSharedProps<TProps>, 'shouldReturnFocusOnClose'>,
        IntentProps {}

property compact

compact?: boolean;

Whether to use a compact appearance, which reduces the visual padding around tooltip content.
false

property content

content: React.JSX.Element | string;

The content that will be displayed inside of the tooltip.

property hoverCloseDelay

hoverCloseDelay?: number;

The amount of time in milliseconds the tooltip should remain open after the user hovers off the trigger. The timer is canceled if the user mouses over the target before it expires.
0

property hoverOpenDelay

hoverOpenDelay?: number;

The amount of time in milliseconds the tooltip should wait before opening after the user hovers over the trigger. The timer is canceled if the user mouses away from the target before it expires.
100

property interactionKind

interactionKind?:
    | typeof PopoverInteractionKind.HOVER
    | typeof PopoverInteractionKind.HOVER_TARGET_ONLY;

The kind of hover interaction that triggers the display of the tooltip. Tooltips do not support click interactions.
PopoverInteractionKind.HOVER_TARGET_ONLY

property transitionDuration

transitionDuration?: number;

Indicates how long (in milliseconds) the tooltip's appear/disappear transition takes. This is used by React CSSTransition to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
100

interface TreeNodeInfo

interface TreeNodeInfo<T = {}> {}

property childNodes

childNodes?: Array<TreeNodeInfo<T>>;

Child tree nodes of this node.

property className

className?: string;

A space-delimited list of class names for this tree node element.

property disabled

disabled?: boolean;

Whether this tree node is non-interactive. Enabling this prop will ignore mouse event handlers (in particular click, down, enter, leave).

property hasCaret

hasCaret?: boolean;

Whether the caret to expand/collapse a node should be shown. If not specified, this will be true if the node has children and false otherwise.

property icon

icon?: IconName | MaybeElement;

The name of a Blueprint icon (or an icon element) to render next to the node's label.

property id

id: string | number;

A unique identifier for the node.

property isExpanded

isExpanded?: boolean;

property isSelected

isSelected?: boolean;

Whether this node is selected.
false

property label

label: string | React.JSX.Element;

The main label for the node.

property nodeData

nodeData?: T;

An optional custom user object to associate with the node. This property can then be used in the onClick, onContextMenu and onDoubleClick event handlers for doing custom logic per node.

property secondaryLabel

secondaryLabel?: string | MaybeElement;

A secondary label/component that is displayed at the right side of the node.

interface TreeNodeProps

interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {}

property children

children?: React.ReactNode;

property contentRef

contentRef?: (node: TreeNodeInfo<T>, element: HTMLDivElement | null) => void;

property depth

depth: number;

property key

key?: string | number;

property onClick

onClick?: TreeEventHandler<T>;

property onCollapse

onCollapse?: TreeEventHandler<T>;

property onContextMenu

onContextMenu?: TreeEventHandler<T>;

property onDoubleClick

onDoubleClick?: TreeEventHandler<T>;

property onExpand

onExpand?: TreeEventHandler<T>;

property onMouseEnter

onMouseEnter?: TreeEventHandler<T>;

property onMouseLeave

onMouseLeave?: TreeEventHandler<T>;

property path

path: number[];

interface TreeProps

interface TreeProps<T = {}> extends Props {}

property compact

compact?: boolean;

Whether to use a compact appearance which reduces the visual padding around node content.

property contents

contents: ReadonlyArray<TreeNodeInfo<T>>;

The data specifying the contents and appearance of the tree.

property onNodeClick

onNodeClick?: TreeEventHandler<T>;

Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node.

property onNodeCollapse

onNodeCollapse?: TreeEventHandler<T>;

Invoked when caret of an expanded node is clicked.

property onNodeContextMenu

onNodeContextMenu?: TreeEventHandler<T>;

Invoked when a node is right-clicked or the context menu button is pressed on a focused node.

property onNodeDoubleClick

onNodeDoubleClick?: TreeEventHandler<T>;

Invoked when a node is double-clicked. Be careful when using this in combination with an onNodeClick (single-click) handler, as the way this behaves can vary between browsers. See http://stackoverflow.com/q/5497073/3124288

property onNodeExpand

onNodeExpand?: TreeEventHandler<T>;

Invoked when the caret of a collapsed node is clicked.

property onNodeMouseEnter

onNodeMouseEnter?: TreeEventHandler<T>;

Invoked when the mouse is moved over a node.

property onNodeMouseLeave

onNodeMouseLeave?: TreeEventHandler<T>;

Invoked when the mouse is moved out of a node.

interface UseHotkeysOptions

interface UseHotkeysOptions {}

property document

document?: Document;

A custom document to reference when binding global event handlers. This can be useful when using iframes in an application.
window.document

property showDialogKeyCombo

showDialogKeyCombo?: string;

The key combo which will trigger the hotkeys dialog to open.
"?"

interface UseHotkeysReturnValue

interface UseHotkeysReturnValue {}

property handleKeyDown

handleKeyDown: React.KeyboardEventHandler<HTMLElement>;

property handleKeyUp

handleKeyUp: React.KeyboardEventHandler<HTMLElement>;

Enums

enum DrawerSize

enum DrawerSize {
    SMALL = '360px',
    STANDARD = '50%',
    LARGE = '90%',
}

member LARGE

LARGE = '90%'

member SMALL

SMALL = '360px'

member STANDARD

STANDARD = '50%'

enum NonIdealStateIconSize

enum NonIdealStateIconSize {
    STANDARD = 48,
    SMALL = 32,
    EXTRA_SMALL = 20,
}

member EXTRA_SMALL

EXTRA_SMALL = 20

member SMALL

SMALL = 32

member STANDARD

STANDARD = 48

enum PopupKind

enum PopupKind {
    MENU = 'menu',
    LISTBOX = 'listbox',
    TREE = 'tree',
    GRID = 'grid',
    DIALOG = 'dialog',
}

Specifies the popup kind for [aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup).

member DIALOG

DIALOG = 'dialog'

The popup is a dialog.

member GRID

GRID = 'grid'

The popup is a grid.

member LISTBOX

LISTBOX = 'listbox'

The popup is a listbox.

MENU = 'menu'

The popup is a menu.

member TREE

TREE = 'tree'

The popup is a tree.

enum SpinnerSize

enum SpinnerSize {
    SMALL = 20,
    STANDARD = 50,
    LARGE = 100,
}

member LARGE

LARGE = 100

member SMALL

SMALL = 20

member STANDARD

STANDARD = 50

Type Aliases

type Alignment

type Alignment = (typeof Alignment)[keyof typeof Alignment];

type AnchorButtonProps

type AnchorButtonProps = ButtonSharedProps &
    React.AnchorHTMLAttributes<HTMLAnchorElement> &
    React.RefAttributes<HTMLAnchorElement>;

type Boundary

type Boundary = (typeof Boundary)[keyof typeof Boundary];

type ButtonProps

type ButtonProps = ButtonSharedProps &
    React.ButtonHTMLAttributes<HTMLButtonElement> &
    React.RefAttributes<HTMLButtonElement>;

type ButtonSharedPropsAndAttributes

type ButtonSharedPropsAndAttributes = ButtonSharedProps &
    React.HTMLAttributes<HTMLElement>;

Props interface assignable to both the Button and AnchorButton components.
It is useful for the props for the two components to be assignable to each other because the components are so similar and distinguishing between them in their event handlers is usually unnecessary.

type ButtonVariant

type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];

type CheckboxCardProps

type CheckboxCardProps = Omit<ControlCardProps, 'controlKind'>;

type ControlledProps

type ControlledProps = Omit<
    ControlledValueProps<string, HTMLInputElement>,
    'onChange'
>;

Deprecated
use ControlledValueProps

type DefaultPopoverTargetHTMLProps

type DefaultPopoverTargetHTMLProps = React.HTMLProps<HTMLElement>;

Default props interface for the Popover target element.
These props are applied to the generated target element (whose tag name is customizable via targetTagName) or, when the renderTarget API is used, sent as props to that render function.
This interface is generic enough to be compatible with the various HTML attributes Popover needs in order to function properly, including things like event handlers and ARIA accessibility attributes.

type DialogStepButtonProps

type DialogStepButtonProps = Partial<ButtonSharedPropsAndAttributes> & {
    /** If defined, the button will be wrapped with a tooltip with the specified content. */
    tooltipContent?: TooltipProps['content'];
};

type DialogStepId

type DialogStepId = string | number;

type Elevation

type Elevation = (typeof Elevation)[keyof typeof Elevation];

type HandleHtmlProps

type HandleHtmlProps = Pick<
    HTMLProps<HTMLSpanElement>,
    'aria-label' | 'aria-labelledby'
>;

type HandleInteractionKind

type HandleInteractionKind =
    (typeof HandleInteractionKind)[keyof typeof HandleInteractionKind];

type HandleType

type HandleType = (typeof HandleType)[keyof typeof HandleType];

type HotkeyProps

type HotkeyProps = Props & HotkeyConfig;

type HotkeysContextInstance

type HotkeysContextInstance = readonly [
    HotkeysContextState,
    React.Dispatch<HotkeysAction>
];

type HTMLDivProps

type HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;

Alias for all valid HTML props for <div> element. Does not include React's ref or key.

type HTMLInputProps

type HTMLInputProps = React.InputHTMLAttributes<HTMLInputElement>;

Alias for all valid HTML props for <input> element. Does not include React's ref or key.

type HTMLSelectIconName

type HTMLSelectIconName = Extends<IconName, 'double-caret-vertical' | 'caret-down'>;

type IconProps

type IconProps<T extends Element = Element> = IntentProps &
    Props &
    SVGIconProps<T> &
    IconOwnProps;

Generic interface for the <Icon> component which may be parameterized by its root element type.
See Also
- https://blueprintjs.com/docs/#core/components/icon.dom-attributes

type Intent

type Intent = (typeof Intent)[keyof typeof Intent];

type MaybeElement

type MaybeElement = React.JSX.Element | false | null | undefined;

Alias for a React.JSX.Element or a value that renders nothing.
In React, boolean, null, and undefined do not produce any output.

type MultistepDialogNavPosition

type MultistepDialogNavPosition =
    | typeof Position.TOP
    | typeof Position.LEFT
    | typeof Position.RIGHT;

type NonSmallSize

type NonSmallSize = Exclude<Size, 'small'>;

A subset of Size which excludes "small"

type NumberRange

type NumberRange = [number, number];

type OverlayToasterCreateOptions

type OverlayToasterCreateOptions = DOMMountOptions<OverlayToasterProps>;

type PanelProps

type PanelProps<P> = P & PanelActions;

Use this interface in your panel component's props type to access these panel action callbacks which are injected by PanelStack2.
See the code example in the docs website.
See Also
- https://blueprintjs.com/docs/#core/components/panel-stack2

type PopoverClickTargetHandlers

type PopoverClickTargetHandlers<
    TProps extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps
> = Pick<TProps, 'onClick' | 'onKeyDown'>;

Event handlers injected by Popover for click interaction popovers.

type PopoverHoverTargetHandlers

type PopoverHoverTargetHandlers<
    TProps extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps
> = Pick<
    TProps,
    'onBlur' | 'onContextMenu' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave'
>;

Event handlers injected by Popover for hover interaction popovers.

type PopoverInteractionKind

type PopoverInteractionKind =
    (typeof PopoverInteractionKind)[keyof typeof PopoverInteractionKind];

type PopoverPosition

type PopoverPosition = (typeof PopoverPosition)[keyof typeof PopoverPosition];

type PopperCustomModifier

type PopperCustomModifier = Partial<Modifier<any, object>>;

Custom popper.js v2 modifier for Popover and Tooltip.
See Also
- https://popper.js.org/docs/v2/modifiers/#custom-modifiers

type PopperModifierOverrides

type PopperModifierOverrides = Partial<{
    [M in StrictModifierNames]: Partial<Omit<StrictModifier<M>, 'name'>>;
}>;

Configuration object for customizing popper.js v2 modifiers in Popover and Tooltip.
See Also
- https://popper.js.org/docs/v2/modifiers/

type Position

type Position = (typeof Position)[keyof typeof Position];

type RadioCardProps

type RadioCardProps = Omit<ControlCardProps, 'controlKind'>;

type RadioProps

type RadioProps = ControlProps;

Radio component props.

type ResizeEntry

type ResizeEntry = ResizeObserverEntry;

type SectionElevation

type SectionElevation = typeof Elevation.ZERO | typeof Elevation.ONE;

Subset of Elevation options which are visually supported by the Section component.
Note that an elevation greater than 1 creates too much visual clutter/noise in the UI, especially when multiple Sections are shown on a single page.

type SegmentedControlIntent

type SegmentedControlIntent = typeof Intent.NONE | typeof Intent.PRIMARY;

type Size

type Size = (typeof Size)[keyof typeof Size];

type StrictModifierNames

type StrictModifierNames = NonNullable<StrictModifiers['name']>;

type SwitchCardProps

type SwitchCardProps = Omit<ControlCardProps, 'controlKind'>;

type TabId

type TabId = string | number;

type TagInputAddMethod

type TagInputAddMethod = 'default' | 'blur' | 'paste';

The method in which a TagInput value was added. - "default" - indicates that a value was added by manual selection. - "blur" - indicates that a value was added when the TagInput lost focus. This is only possible when addOnBlur=true. - "paste" - indicates that a value was added via paste. This is only possible when addOnPaste=true.

type TextAlignment

type TextAlignment = (typeof TextAlignment)[keyof typeof TextAlignment];

type ToasterPosition

type ToasterPosition =
    | typeof Position.TOP
    | typeof Position.TOP_LEFT
    | typeof Position.TOP_RIGHT
    | typeof Position.BOTTOM
    | typeof Position.BOTTOM_LEFT
    | typeof Position.BOTTOM_RIGHT;

type ToastOptions

type ToastOptions = ToastProps & {
    key: string;
};

type TreeEventHandler

type TreeEventHandler<T = {}> = (
    node: TreeNodeInfo<T>,
    nodePath: number[],
    e: React.MouseEvent<HTMLElement>
) => void;

Namespaces

namespace Classes

module 'lib/esm/common/classes.d.ts' {}

Deprecated
use <HTMLSelect> component or Classes.HTML_SELECT instead

variable ACTIVE

const ACTIVE: string;

variable ALERT

const ALERT: string;

variable ALERT_BODY

const ALERT_BODY: string;

variable ALERT_CONTENTS

const ALERT_CONTENTS: string;

variable ALERT_FOOTER

const ALERT_FOOTER: string;

variable ALIGN_LEFT

const ALIGN_LEFT: string;

variable ALIGN_RIGHT

const ALIGN_RIGHT: string;

variable BLOCKQUOTE

const BLOCKQUOTE: string;

const BREADCRUMB: string;

variable BREADCRUMB_CURRENT

const BREADCRUMB_CURRENT: string;

const BREADCRUMBS: string;

variable BREADCRUMBS_COLLAPSED

const BREADCRUMBS_COLLAPSED: string;

variable BUTTON

const BUTTON: string;

variable BUTTON_GROUP

const BUTTON_GROUP: string;

variable BUTTON_SPINNER

const BUTTON_SPINNER: string;

variable BUTTON_TEXT

const BUTTON_TEXT: string;

variable CALLOUT

const CALLOUT: string;

variable CALLOUT_HAS_BODY_CONTENT

const CALLOUT_HAS_BODY_CONTENT: string;

variable CALLOUT_ICON

const CALLOUT_ICON: string;

variable CARD

const CARD: string;

variable CARD_LIST

const CARD_LIST: string;

variable CARD_LIST_BORDERED

const CARD_LIST_BORDERED: string;

variable CHECKBOX

const CHECKBOX: string;

variable CHECKBOX_CONTROL_CARD

const CHECKBOX_CONTROL_CARD: string;

variable CODE

const CODE: string;

variable CODE_BLOCK

const CODE_BLOCK: string;

variable COLLAPSE

const COLLAPSE: string;

variable COLLAPSE_BODY

const COLLAPSE_BODY: string;

variable COMPACT

const COMPACT: string;

variable COMPOUND_TAG

const COMPOUND_TAG: string;

variable COMPOUND_TAG_LEFT

const COMPOUND_TAG_LEFT: string;

variable COMPOUND_TAG_LEFT_CONTENT

const COMPOUND_TAG_LEFT_CONTENT: string;

variable COMPOUND_TAG_RIGHT

const COMPOUND_TAG_RIGHT: string;

variable COMPOUND_TAG_RIGHT_CONTENT

const COMPOUND_TAG_RIGHT_CONTENT: string;

variable CONTEXT_MENU

const CONTEXT_MENU: string;

variable CONTEXT_MENU_BACKDROP

const CONTEXT_MENU_BACKDROP: string;

const CONTEXT_MENU_POPOVER: string;

variable CONTEXT_MENU_VIRTUAL_TARGET

const CONTEXT_MENU_VIRTUAL_TARGET: string;

variable CONTROL

const CONTROL: string;

variable CONTROL_CARD

const CONTROL_CARD: string;

variable CONTROL_CARD_LABEL

const CONTROL_CARD_LABEL: string;

variable CONTROL_GROUP

const CONTROL_GROUP: string;

variable CONTROL_INDICATOR

const CONTROL_INDICATOR: string;

variable CONTROL_INDICATOR_CHILD

const CONTROL_INDICATOR_CHILD: string;

variable DARK

const DARK: string;

variable DIALOG

const DIALOG: string;

variable DIALOG_BODY

const DIALOG_BODY: string;

variable DIALOG_BODY_SCROLL_CONTAINER

const DIALOG_BODY_SCROLL_CONTAINER: string;

variable DIALOG_CLOSE_BUTTON

const DIALOG_CLOSE_BUTTON: string;

variable DIALOG_CONTAINER

const DIALOG_CONTAINER: string;

variable DIALOG_FOOTER

const DIALOG_FOOTER: string;

variable DIALOG_FOOTER_ACTIONS

const DIALOG_FOOTER_ACTIONS: string;

variable DIALOG_FOOTER_FIXED

const DIALOG_FOOTER_FIXED: string;

variable DIALOG_FOOTER_MAIN_SECTION

const DIALOG_FOOTER_MAIN_SECTION: string;

variable DIALOG_HEADER

const DIALOG_HEADER: string;

variable DIALOG_STEP

const DIALOG_STEP: string;

variable DIALOG_STEP_CONTAINER

const DIALOG_STEP_CONTAINER: string;

variable DIALOG_STEP_ICON

const DIALOG_STEP_ICON: string;

variable DIALOG_STEP_TITLE

const DIALOG_STEP_TITLE: string;

variable DIALOG_STEP_VIEWED

const DIALOG_STEP_VIEWED: string;

variable DISABLED

const DISABLED: string;

variable DIVIDER

const DIVIDER: string;

variable DRAWER

const DRAWER: string;

variable DRAWER_BODY

const DRAWER_BODY: string;

variable DRAWER_FOOTER

const DRAWER_FOOTER: string;

variable DRAWER_HEADER

const DRAWER_HEADER: string;

variable EDITABLE_TEXT

const EDITABLE_TEXT: string;

variable EDITABLE_TEXT_CONTENT

const EDITABLE_TEXT_CONTENT: string;

variable EDITABLE_TEXT_EDITING

const EDITABLE_TEXT_EDITING: string;

variable EDITABLE_TEXT_INPUT

const EDITABLE_TEXT_INPUT: string;

variable EDITABLE_TEXT_PLACEHOLDER

const EDITABLE_TEXT_PLACEHOLDER: string;

variable ELEVATION_0

const ELEVATION_0: string;

variable ELEVATION_1

const ELEVATION_1: string;

variable ELEVATION_2

const ELEVATION_2: string;

variable ELEVATION_3

const ELEVATION_3: string;

variable ELEVATION_4

const ELEVATION_4: string;

variable END

const END: string;

variable ENTITY_TITLE

const ENTITY_TITLE: string;

variable ENTITY_TITLE_ELLIPSIZE

const ENTITY_TITLE_ELLIPSIZE: string;

variable ENTITY_TITLE_HAS_SUBTITLE

const ENTITY_TITLE_HAS_SUBTITLE: string;

variable ENTITY_TITLE_ICON_CONTAINER

const ENTITY_TITLE_ICON_CONTAINER: string;

variable ENTITY_TITLE_SUBTITLE

const ENTITY_TITLE_SUBTITLE: string;

variable ENTITY_TITLE_TAGS_CONTAINER

const ENTITY_TITLE_TAGS_CONTAINER: string;

variable ENTITY_TITLE_TEXT

const ENTITY_TITLE_TEXT: string;

variable ENTITY_TITLE_TITLE

const ENTITY_TITLE_TITLE: string;

variable ENTITY_TITLE_TITLE_AND_TAGS

const ENTITY_TITLE_TITLE_AND_TAGS: string;

variable FILE_INPUT

const FILE_INPUT: string;

variable FILE_INPUT_HAS_SELECTION

const FILE_INPUT_HAS_SELECTION: string;

variable FILE_UPLOAD_INPUT

const FILE_UPLOAD_INPUT: string;

variable FILE_UPLOAD_INPUT_CUSTOM_TEXT

const FILE_UPLOAD_INPUT_CUSTOM_TEXT: string;

variable FILL

const FILL: string;

variable FIXED

const FIXED: string;

variable FIXED_TOP

const FIXED_TOP: string;

variable FLEX_EXPANDER

const FLEX_EXPANDER: string;

variable FOCUS_DISABLED

const FOCUS_DISABLED: string;

variable FOCUS_STYLE_MANAGER_IGNORE

const FOCUS_STYLE_MANAGER_IGNORE: string;

variable FORM_CONTENT

const FORM_CONTENT: string;

variable FORM_GROUP

const FORM_GROUP: string;

variable FORM_GROUP_SUB_LABEL

const FORM_GROUP_SUB_LABEL: string;

variable FORM_HELPER_TEXT

const FORM_HELPER_TEXT: string;

variable HEADING

const HEADING: string;

variable HOTKEY

const HOTKEY: string;

variable HOTKEY_COLUMN

const HOTKEY_COLUMN: string;

variable HOTKEY_DIALOG

const HOTKEY_DIALOG: string;

variable HOTKEY_LABEL

const HOTKEY_LABEL: string;

variable HTML_SELECT

const HTML_SELECT: string;

variable HTML_TABLE

const HTML_TABLE: string;

variable HTML_TABLE_BORDERED

const HTML_TABLE_BORDERED: string;

variable HTML_TABLE_STRIPED

const HTML_TABLE_STRIPED: string;

variable ICON

const ICON: string;

variable ICON_LARGE

const ICON_LARGE: string;

variable ICON_MUTED

const ICON_MUTED: string;

variable ICON_STANDARD

const ICON_STANDARD: string;

variable INLINE

const INLINE: string;

variable INPUT

const INPUT: string;

variable INPUT_ACTION

const INPUT_ACTION: string;

variable INPUT_GHOST

const INPUT_GHOST: string;

variable INPUT_GROUP

const INPUT_GROUP: string;

variable INPUT_LEFT_CONTAINER

const INPUT_LEFT_CONTAINER: string;

variable INTENT_DANGER

const INTENT_DANGER: string;

variable INTENT_PRIMARY

const INTENT_PRIMARY: string;

variable INTENT_SUCCESS

const INTENT_SUCCESS: string;

variable INTENT_WARNING

const INTENT_WARNING: string;

variable INTERACTIVE

const INTERACTIVE: string;

variable KEY

const KEY: string;

variable KEY_COMBO

const KEY_COMBO: string;

variable LABEL

const LABEL: string;

variable LARGE

const LARGE: string;

variable LIST

const LIST: string;

variable LIST_UNSTYLED

const LIST_UNSTYLED: string;

variable LOADING

const LOADING: string;

const MENU: string;

variable MENU_DIVIDER

const MENU_DIVIDER: string;

variable MENU_HEADER

const MENU_HEADER: string;

variable MENU_ITEM

const MENU_ITEM: string;

variable MENU_ITEM_ICON

const MENU_ITEM_ICON: string;

variable MENU_ITEM_IS_SELECTABLE

const MENU_ITEM_IS_SELECTABLE: string;

variable MENU_ITEM_LABEL

const MENU_ITEM_LABEL: string;

variable MENU_ITEM_SELECTED_ICON

const MENU_ITEM_SELECTED_ICON: string;

variable MENU_SUBMENU

const MENU_SUBMENU: string;

variable MENU_SUBMENU_ICON

const MENU_SUBMENU_ICON: string;

variable MINIMAL

const MINIMAL: string;

variable MODIFIER_KEY

const MODIFIER_KEY: string;

variable MONOSPACE_TEXT

const MONOSPACE_TEXT: string;

variable MULTILINE

const MULTILINE: string;

variable MULTISTEP_DIALOG

const MULTISTEP_DIALOG: string;

variable MULTISTEP_DIALOG_LEFT_PANEL

const MULTISTEP_DIALOG_LEFT_PANEL: string;

variable MULTISTEP_DIALOG_NAV_RIGHT

const MULTISTEP_DIALOG_NAV_RIGHT: string;

variable MULTISTEP_DIALOG_NAV_TOP

const MULTISTEP_DIALOG_NAV_TOP: string;

variable MULTISTEP_DIALOG_PANELS

const MULTISTEP_DIALOG_PANELS: string;

variable MULTISTEP_DIALOG_RIGHT_PANEL

const MULTISTEP_DIALOG_RIGHT_PANEL: string;

const NAVBAR: string;

variable NAVBAR_DIVIDER

const NAVBAR_DIVIDER: string;

variable NAVBAR_GROUP

const NAVBAR_GROUP: string;

variable NAVBAR_HEADING

const NAVBAR_HEADING: string;

variable NON_IDEAL_STATE

const NON_IDEAL_STATE: string;

variable NON_IDEAL_STATE_TEXT

const NON_IDEAL_STATE_TEXT: string;

variable NON_IDEAL_STATE_VISUAL

const NON_IDEAL_STATE_VISUAL: string;

variable NUMERIC_INPUT

const NUMERIC_INPUT: string;

variable OUTLINED

const OUTLINED: string;

variable OVERFLOW_LIST

const OVERFLOW_LIST: string;

variable OVERFLOW_LIST_SPACER

const OVERFLOW_LIST_SPACER: string;

variable OVERLAY

const OVERLAY: string;

variable OVERLAY_BACKDROP

const OVERLAY_BACKDROP: string;

variable OVERLAY_CONTAINER

const OVERLAY_CONTAINER: string;

variable OVERLAY_CONTENT

const OVERLAY_CONTENT: string;

variable OVERLAY_END_FOCUS_TRAP

const OVERLAY_END_FOCUS_TRAP: string;

variable OVERLAY_INLINE

const OVERLAY_INLINE: string;

variable OVERLAY_OPEN

const OVERLAY_OPEN: string;

variable OVERLAY_SCROLL_CONTAINER

const OVERLAY_SCROLL_CONTAINER: string;

variable OVERLAY_START_FOCUS_TRAP

const OVERLAY_START_FOCUS_TRAP: string;

variable PADDED

const PADDED: string;

variable PANEL_STACK

const PANEL_STACK: string;

variable PANEL_STACK_HEADER

const PANEL_STACK_HEADER: string;

variable PANEL_STACK_HEADER_BACK

const PANEL_STACK_HEADER_BACK: string;

variable PANEL_STACK_VIEW

const PANEL_STACK_VIEW: string;

variable PANEL_STACK2

const PANEL_STACK2: string;

variable PANEL_STACK2_HEADER

const PANEL_STACK2_HEADER: string;

variable PANEL_STACK2_HEADER_BACK

const PANEL_STACK2_HEADER_BACK: string;

variable PANEL_STACK2_VIEW

const PANEL_STACK2_VIEW: string;

variable POPOVER

const POPOVER: string;

variable POPOVER_ARROW

const POPOVER_ARROW: string;

variable POPOVER_BACKDROP

const POPOVER_BACKDROP: string;

variable POPOVER_CAPTURING_DISMISS

const POPOVER_CAPTURING_DISMISS: string;

variable POPOVER_CONTENT

const POPOVER_CONTENT: string;

variable POPOVER_CONTENT_PLACEMENT

const POPOVER_CONTENT_PLACEMENT: string;

variable POPOVER_CONTENT_SIZING

const POPOVER_CONTENT_SIZING: string;

variable POPOVER_DISMISS

const POPOVER_DISMISS: string;

variable POPOVER_DISMISS_OVERRIDE

const POPOVER_DISMISS_OVERRIDE: string;

variable POPOVER_MATCH_TARGET_WIDTH

const POPOVER_MATCH_TARGET_WIDTH: string;

variable POPOVER_OPEN

const POPOVER_OPEN: string;

variable POPOVER_POPPER_ESCAPED

const POPOVER_POPPER_ESCAPED: string;

variable POPOVER_REFERENCE_HIDDEN

const POPOVER_REFERENCE_HIDDEN: string;

variable POPOVER_TARGET

const POPOVER_TARGET: string;

variable POPOVER_TRANSITION_CONTAINER

const POPOVER_TRANSITION_CONTAINER: string;

variable POPOVER_WRAPPER

const POPOVER_WRAPPER: string;

@deprecated, no longer used in Blueprint v5.x

variable PORTAL

const PORTAL: string;

variable POSITION_BOTTOM

const POSITION_BOTTOM: string;

variable POSITION_LEFT

const POSITION_LEFT: string;

variable POSITION_RIGHT

const POSITION_RIGHT: string;

variable POSITION_TOP

const POSITION_TOP: string;

variable PROGRESS_BAR

const PROGRESS_BAR: string;

variable PROGRESS_METER

const PROGRESS_METER: string;

variable PROGRESS_NO_ANIMATION

const PROGRESS_NO_ANIMATION: string;

variable PROGRESS_NO_STRIPES

const PROGRESS_NO_STRIPES: string;

variable RADIO

const RADIO: string;

variable RADIO_CONTROL_CARD

const RADIO_CONTROL_CARD: string;

variable RADIO_GROUP

const RADIO_GROUP: string;

variable READ_ONLY

const READ_ONLY: string;

variable RESIZABLE_INPUT_SPAN

const RESIZABLE_INPUT_SPAN: string;

variable ROUND

const ROUND: string;

variable RTL

const RTL: string;

variable RUNNING_TEXT

const RUNNING_TEXT: string;

variable SECTION

const SECTION: string;

variable SECTION_CARD

const SECTION_CARD: string;

variable SECTION_COLLAPSED

const SECTION_COLLAPSED: string;

variable SECTION_HEADER

const SECTION_HEADER: string;

variable SECTION_HEADER_COLLAPSE_CARET

const SECTION_HEADER_COLLAPSE_CARET: string;

variable SECTION_HEADER_DIVIDER

const SECTION_HEADER_DIVIDER: string;

variable SECTION_HEADER_LEFT

const SECTION_HEADER_LEFT: string;

variable SECTION_HEADER_RIGHT

const SECTION_HEADER_RIGHT: string;

variable SECTION_HEADER_SUB_TITLE

const SECTION_HEADER_SUB_TITLE: string;

variable SECTION_HEADER_TABS

const SECTION_HEADER_TABS: string;

variable SECTION_HEADER_TITLE

const SECTION_HEADER_TITLE: string;

variable SEGMENTED_CONTROL

const SEGMENTED_CONTROL: string;

variable SELECT

const SELECT: string;

Deprecated
use <HTMLSelect> component or Classes.HTML_SELECT instead

variable SELECTED

const SELECTED: string;

variable SKELETON

const SKELETON: string;

variable SLIDER

const SLIDER: string;

variable SLIDER_AXIS

const SLIDER_AXIS: string;

variable SLIDER_HANDLE

const SLIDER_HANDLE: string;

variable SLIDER_LABEL

const SLIDER_LABEL: string;

variable SLIDER_PROGRESS

const SLIDER_PROGRESS: string;

variable SLIDER_TRACK

const SLIDER_TRACK: string;

variable SMALL

const SMALL: string;

variable SPINNER

const SPINNER: string;

variable SPINNER_ANIMATION

const SPINNER_ANIMATION: string;

variable SPINNER_HEAD

const SPINNER_HEAD: string;

variable SPINNER_NO_SPIN

const SPINNER_NO_SPIN: string;

variable SPINNER_TRACK

const SPINNER_TRACK: string;

variable START

const START: string;

variable SWITCH

const SWITCH: string;

variable SWITCH_CONTROL_CARD

const SWITCH_CONTROL_CARD: string;

variable SWITCH_INNER_TEXT

const SWITCH_INNER_TEXT: string;

variable TAB

const TAB: string;

variable TAB_ICON

const TAB_ICON: string;

variable TAB_INDICATOR

const TAB_INDICATOR: string;

variable TAB_INDICATOR_WRAPPER

const TAB_INDICATOR_WRAPPER: string;

variable TAB_LIST

const TAB_LIST: string;

variable TAB_PANEL

const TAB_PANEL: string;

variable TAB_TAG

const TAB_TAG: string;

variable TABS

const TABS: string;

variable TAG

const TAG: string;

variable TAG_INPUT

const TAG_INPUT: string;

variable TAG_INPUT_ICON

const TAG_INPUT_ICON: string;

variable TAG_INPUT_VALUES

const TAG_INPUT_VALUES: string;

variable TAG_REMOVE

const TAG_REMOVE: string;

variable TEXT_AREA

const TEXT_AREA: string;

variable TEXT_AREA_AUTO_RESIZE

const TEXT_AREA_AUTO_RESIZE: string;

variable TEXT_DISABLED

const TEXT_DISABLED: string;

variable TEXT_LARGE

const TEXT_LARGE: string;

variable TEXT_MUTED

const TEXT_MUTED: string;

variable TEXT_OVERFLOW_ELLIPSIS

const TEXT_OVERFLOW_ELLIPSIS: string;

variable TEXT_SMALL

const TEXT_SMALL: string;

variable TOAST

const TOAST: string;

variable TOAST_CONTAINER

const TOAST_CONTAINER: string;

variable TOAST_MESSAGE

const TOAST_MESSAGE: string;

variable TOOLTIP

const TOOLTIP: string;

variable TOOLTIP_INDICATOR

const TOOLTIP_INDICATOR: string;

variable TREE

const TREE: string;

variable TREE_NODE

const TREE_NODE: string;

variable TREE_NODE_CARET

const TREE_NODE_CARET: string;

variable TREE_NODE_CARET_CLOSED

const TREE_NODE_CARET_CLOSED: string;

variable TREE_NODE_CARET_NONE

const TREE_NODE_CARET_NONE: string;

variable TREE_NODE_CARET_OPEN

const TREE_NODE_CARET_OPEN: string;

variable TREE_NODE_CONTENT

const TREE_NODE_CONTENT: string;

variable TREE_NODE_EXPANDED

const TREE_NODE_EXPANDED: string;

variable TREE_NODE_ICON

const TREE_NODE_ICON: string;

variable TREE_NODE_LABEL

const TREE_NODE_LABEL: string;

variable TREE_NODE_LIST

const TREE_NODE_LIST: string;

variable TREE_NODE_SECONDARY_LABEL

const TREE_NODE_SECONDARY_LABEL: string;

variable TREE_NODE_SELECTED

const TREE_NODE_SELECTED: string;

variable TREE_ROOT

const TREE_ROOT: string;

variable UI_TEXT

const UI_TEXT: string;

variable VERTICAL

const VERTICAL: string;

function alignmentClass

alignmentClass: (alignment: Alignment | undefined) => string | undefined;

Return CSS class for alignment.

function elevationClass

elevationClass: {
    (elevation: Elevation): string;
    (elevation: undefined): undefined;
    (elevation: Elevation): string;
};

function getClassNamespace

getClassNamespace: () => string;

Returns the namespace prefix for all Blueprint CSS classes. Customize this namespace at build time by defining it with webpack.DefinePlugin.

function iconClass

iconClass: {
    (iconName: string): string;
    (iconName: undefined): undefined;
    (iconName: string): string;
};

Returns CSS class for icon name.

function intentClass

intentClass: {
    (intent: Intent): string;
    (intent: 'none'): undefined;
    (intent: Intent): Intent;
};

Return CSS class for intent.

function positionClass

positionClass: {
    (position: Position): string;
    (position: undefined): undefined;
    (position: Position): string;
};

function sizeClass

sizeClass: (
    size: Size | HTMLInputProps['size'],
    legacyProps: Partial<Record<'large' | 'small', boolean>>
) => string | Record<string, boolean>;

function variantClass

variantClass: (
    variant: ButtonVariant,
    legacyProps: Record<'minimal' | 'outlined', boolean | undefined>
) => string | Record<string, boolean>;

namespace Portal

namespace Portal {}

variable contextTypes

var contextTypes: ValidationMap<PortalLegacyContext>;

variable displayName

var displayName: string;

namespace Utils

module 'lib/esm/common/utils/index.d.ts' {}

function approxEqual

approxEqual: (a: number, b: number, tolerance?: number) => boolean;

Returns true if the two numbers are within the given tolerance of each other. This is useful to correct for floating point precision issues, less useful for integers.

function arrayLengthCompare

arrayLengthCompare: (a?: any[], b?: any[]) => number;

Returns the difference in length between two arrays. A null argument is considered an empty list. The return value will be positive if a is longer than b, negative if the opposite is true, and zero if their lengths are equal.

function arraysEqual

arraysEqual: (
    arrA: any[],
    arrB: any[],
    compare?: (a: any, b: any) => boolean
) => boolean;

Returns true if the arrays are equal. Elements will be shallowly compared by default, or they will be compared using the custom compare function if one is provided.

function clamp

clamp: (val: number, min: number, max: number) => number;

Clamps the given number between min and max values. Returns value if within range, or closest bound.

function clickElementOnKeyPress

clickElementOnKeyPress: (keys: string[]) => (e: React.KeyboardEvent) => void;

function countDecimalPlaces

countDecimalPlaces: (num: number) => number;

Returns the number of decimal places in the given number.

function deepCompareKeys

deepCompareKeys: (
    objA: any,
    objB: any,
    keys?: Array<string | number | symbol>
) => boolean;

Deep comparison between objects. If keys is provided, just that subset of keys will be compared; otherwise, all keys will be compared.
Returns
true if items are equal.

function elementIsOrContains

elementIsOrContains: (element: HTMLElement, testElement: HTMLElement) => boolean;

function elementIsTextInput

elementIsTextInput: (elem: HTMLElement) => boolean;

Checks whether the given element is inside something that looks like a text input. This is particularly useful to determine if a keyboard event inside this element should take priority over hotkey bindings / keyboard shortcut handlers.
Returns
true if the element is inside a text input

function ensureElement

ensureElement: (
    child: React.ReactNode | undefined,
    tagName?: keyof React.JSX.IntrinsicElements,
    props?: React.HTMLProps<HTMLElement>
) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;

Converts a React node to an element. Non-empty strings, numbers, and Fragments will be wrapped in given tag name; empty strings and booleans will be discarded.
Parameter child
the React node to convert
Parameter tagName
the HTML tag name to use when a wrapper element is needed
Parameter props
additional props to spread onto the element, if any. If the child is a React element and this argument is defined, the child will be cloned and these props will be merged in.

function getActiveElement

getActiveElement: (
    element?: HTMLElement | null,
    options?: GetRootNodeOptions
) => HTMLElement | null;

Gets the active element in the document or shadow root (if an element is provided, and it's in the shadow DOM).

function getArrowKeyDirection

getArrowKeyDirection: (
    event: React.KeyboardEvent<HTMLElement>,
    negativeKeys: ArrowKey[],
    positiveKeys: ArrowKey[]
) => 1 | -1 | undefined;

Direction multiplier

function getDeepUnequalKeyValues

getDeepUnequalKeyValues: <T extends {}>(
    objA?: T,
    objB?: T,
    keys?: Array<keyof T>
) => { key: keyof T; valueA: T[keyof T]; valueB: T[keyof T] }[];

Returns a descriptive object for each key whose values are deeply unequal between two provided objects. Useful for debugging shouldComponentUpdate.

function getFocusableElements

getFocusableElements: (element: HTMLElement) => HTMLElement[];

Gets all focusable elements within the given element.
Selector derived from this SO question: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
Note: Order may not be correct if children elements use tabindex values > 0.
Parameter element
The element to search within.
Returns
{HTMLElement[]} An array of focusable elements.

function getRef

getRef: <T>(ref: T | React.RefObject<T> | null) => T | null;

function isArrowKey

isArrowKey: (event: React.KeyboardEvent<HTMLElement>) => boolean;

function isDarkTheme

isDarkTheme: (element: Element | Text | null | undefined) => boolean;

function isElementOfType

isElementOfType: <P = {}>(
    element: any,
    ComponentType: React.ComponentType<P>
) => element is React.ReactElement<P>;

Returns true if the given JSX element matches the given component type.
NOTE: This function only checks equality of displayName for performance and to tolerate multiple minor versions of a component being included in one application bundle.
Parameter element
JSX element in question
Parameter ComponentType
desired component type of element

function isEmptyString

isEmptyString: (val: any) => boolean;

Returns
true if the value is an empty string after trimming whitespace

function isFunction

isFunction: (value: any) => value is Function;

Returns whether the value is a function. Acts as a type guard.

function isKeyboardClick

isKeyboardClick: (event: React.KeyboardEvent<HTMLElement>) => boolean;

Returns whether the keyboard event was triggered by Enter or Space, the two keys that are expected to trigger interactive elements like buttons.

function isNodeEnv

isNodeEnv: (env: string) => boolean;

Returns whether bundler-injected variable NODE_ENV equals env.

function isReact18OrHigher

isReact18OrHigher: () => boolean;

function isReactElement

isReactElement: <T = any>(
    child: React.ReactNode
) => child is React.ReactElement<T>;

function isReactNodeEmpty

isReactNodeEmpty: (node?: React.ReactNode, skipArray?: boolean) => boolean;

Returns true if node is null/undefined, false, empty string, or an array composed of those. If node is an array, only one level of the array is checked, for performance reasons.

function setRef

setRef: <T>(refTarget: React.Ref<T> | undefined, ref: T | null) => void;

Assign the given ref to a target, either a React ref object or a callback which takes the ref as its first argument.

function shallowCompareKeys

shallowCompareKeys: <T extends {}>(
    objA: T | null | undefined,
    objB: T | null | undefined,
    keys?: KeyDenylist<T> | KeyAllowlist<T>
) => boolean;

Shallow comparison between objects. If keys is provided, just that subset of keys will be compared; otherwise, all keys will be compared.
Returns
true if items are equal.

function throttle

throttle: <T extends Function>(method: T) => T;

Throttle a method by wrapping it in a requestAnimationFrame call. Returns the throttled function.

function throttleEvent

throttleEvent: (
    target: EventTarget,
    eventName: string,
    newEventName: string
) => (event: Event) => void;

Throttle an event on an EventTarget by wrapping it in a requestAnimationFrame call. Returns the event handler that was bound to given eventName so you can clean up after yourself.
See Also
- https://developer.mozilla.org/en-US/docs/Web/Events/scroll

function throttleReactEventCallback

throttleReactEventCallback: <
    E extends React.SyntheticEvent = React.SyntheticEvent
>(
    callback: (event: E, ...otherArgs: any[]) => any,
    options?: ThrottledReactEventOptions
) => (event2: E) => void;

Throttle a callback by wrapping it in a requestAnimationFrame call. Returns the throttled function.
See Also
- https://www.html5rocks.com/en/tutorials/speed/animations/

function uniqueId

uniqueId: (namespace: string) => string;

Generate a unique ID within a given namespace, using a simple counter-based implementation to avoid collisions.

interface KeyAllowlist

interface KeyAllowlist<T> {}

property include

include: Array<keyof T>;

interface KeyDenylist

interface KeyDenylist<T> {}

property exclude

exclude: Array<keyof T>;

type Extends

type Extends<T, U extends T> = U;

Useful to create a subset of a string union type

Package Files (132)

Dependencies (10)

Dev Dependencies (16)

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@blueprintjs/core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@blueprintjs/core)

HTML

<a href="https://www.jsdocs.io/package/@blueprintjs/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 7 days ago.
Package analyzed in 17394 ms.
Missing or incorrect documentation? Open an issue for this package.

@blueprintjs/core

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable Alert

See Also

variable Alignment

variable AnchorButton

See Also

variable Blockquote

variable Boundary

variable Breadcrumb

See Also

variable Button

See Also

variable ButtonGroup

See Also

variable ButtonVariant

variable Callout

See Also

variable Card

See Also

variable CardList

variable Checkbox

See Also

variable CheckboxCard

See Also

variable Code

variable CompoundTag

See Also

variable ContextMenu

See Also

variable ContextMenuPopover

See Also

variable ControlGroup

See Also

variable DialogBody

See Also

variable DialogFooter

See Also

variable DialogStep

See Also

variable DISPLAYNAME_PREFIX

variable Divider

See Also

variable Elevation

variable EntityTitle

See Also

variable Expander

Deprecated

variable FileInput

See Also

variable FocusStyleManager

variable FormGroup

See Also

variable H1

variable H2

variable H3

variable H4

variable H5

variable H6

variable HandleInteractionKind

variable HandleType

variable HotkeysContext

variable HotkeysDialog2

variable HTMLSelect

See Also

variable HTMLTable

See Also

variable Icon

See Also

variable Intent