@patternfly/react-core

@patternfly/react-core

Version 6.6.1
Published 1 month ago
25.5 MB
6 dependencies
MIT license

Install

npm i @patternfly/react-core

yarn add @patternfly/react-core

pnpm add @patternfly/react-core

Overview

This library provides a set of common React components for use with the PatternFly reference implementation.

Index

Variables

variable AboutModal

const AboutModal: React.FunctionComponent<AboutModalProps>;

variable Accordion

const Accordion: React.FunctionComponent<AccordionProps>;

variable AccordionContent

const AccordionContent: React.FunctionComponent<AccordionContentProps>;

variable AccordionExpandableContentBody

const AccordionExpandableContentBody: React.FunctionComponent<AccordionExpandableContentBodyProps>;

variable AccordionItem

const AccordionItem: React.FunctionComponent<AccordionItemProps>;

variable AccordionToggle

const AccordionToggle: React.FunctionComponent<AccordionToggleProps>;

variable ActionGroup

const ActionGroup: React.FunctionComponent<ActionGroupProps>;

variable ActionList

const ActionList: React.FunctionComponent<ActionListProps>;

variable ActionListGroup

const ActionListGroup: React.FunctionComponent<ActionListGroupProps>;

variable ActionListItem

const ActionListItem: React.FunctionComponent<ActionListItemProps>;

variable Alert

const Alert: React.FunctionComponent<AlertProps>;

variable AlertActionCloseButton

const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseButtonProps>;

variable AlertActionLink

const AlertActionLink: React.FunctionComponent<AlertActionLinkProps>;

variable AlertContext

const AlertContext: any;

variable AlertGroup

const AlertGroup: React.FunctionComponent<AlertGroupProps>;

variable AnimationsProvider

const AnimationsProvider: FunctionComponent<AnimationsProviderProps>;

AnimationsProvider is an application-level provider that provides uniform animation configuration for all PatternFly React components via the React context API.
**Usage**: Place this provider at the root of your application to enable global animation control without requiring manual prop drilling throughout your component tree.
**Benefits**: - Centralized animation control for the entire application - Respects user accessibility preferences (reduced motion) - Components can still override the global setting when needed - Works with all PatternFly components that support animations
Example 1
// App.tsx - Place at your application root import { AnimationsProvider } from '@patternfly/react-core'; const App = () => ( <AnimationsProvider config={{ hasAnimations: true }}> <MyApplication /> </AnimationsProvider> );

variable ASTERISK

const ASTERISK: string;

variable Avatar

const Avatar: React.FunctionComponent<AvatarProps>;

variable Backdrop

const Backdrop: React.FunctionComponent<BackdropProps>;

variable BackgroundImage

const BackgroundImage: React.FunctionComponent<BackgroundImageProps>;

variable BackToTop

const BackToTop: any;

variable Badge

const Badge: React.FunctionComponent<BadgeProps>;

const Banner: React.FunctionComponent<StatusBanner | NonStatusBanner>;

variable Brand

const Brand: React.FunctionComponent<BrandProps>;

const Breadcrumb: React.FunctionComponent<BreadcrumbProps>;

variable BreadcrumbHeading

const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps>;

variable BreadcrumbItem

const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps>;

variable Bullseye

const Bullseye: React.FunctionComponent<BullseyeProps>;

variable Button

const Button: any;

variable CalendarMonth

const CalendarMonth: {
    ({
        date: dateProp,
        locale,
        monthFormat,
        weekdayFormat,
        longWeekdayFormat,
        dayFormat,
        weekStart,
        onChange,
        validators,
        className,
        onSelectToggle,
        onMonthChange,
        rangeStart,
        prevMonthAriaLabel,
        nextMonthAriaLabel,
        yearInputAriaLabel,
        cellAriaLabel,
        isDateFocused,
        inlineProps,
        monthAppendTo,
        ...props
    }: CalendarProps): any;
    displayName: string;
};

The main calendar month component.

variable canUseDOM

const canUseDOM: boolean;

Copied from exenv

variable Card

const Card: any;

variable CardBody

const CardBody: React.FunctionComponent<CardBodyProps>;

variable CardContext

const CardContext: any;

variable CardExpandableContent

const CardExpandableContent: React.FunctionComponent<CardExpandableContentProps>;

variable CardFooter

const CardFooter: React.FunctionComponent<CardFooterProps>;

variable CardHeader

const CardHeader: React.FunctionComponent<CardHeaderProps>;

variable CardTitle

const CardTitle: React.FunctionComponent<CardTitleProps>;

variable ClipboardCopyAction

const ClipboardCopyAction: React.FunctionComponent<ClipboardCopyActionProps>;

variable ClipboardCopyButton

const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonProps>;

variable CodeBlock

const CodeBlock: React.FunctionComponent<CodeBlockProps>;

variable CodeBlockAction

const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps>;

variable CodeBlockCode

const CodeBlockCode: React.FunctionComponent<CodeBlockCodeProps>;

variable Compass

const Compass: React.FunctionComponent<CompassProps>;

variable CompassContent

const CompassContent: React.FunctionComponent<CompassContentProps>;

variable CompassDockMain

const CompassDockMain: React.FunctionComponent<CompassDockMainProps>;

variable CompassHeader

const CompassHeader: React.FunctionComponent<CompassHeaderProps>;

variable CompassHero

const CompassHero: React.FunctionComponent<CompassHeroProps>;

variable CompassMainFooter

const CompassMainFooter: React.FunctionComponent<CompassMainFooterProps>;

variable CompassMainHeader

const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>;

variable CompassMainHeaderContent

const CompassMainHeaderContent: React.FunctionComponent<CompassMainHeaderContentProps>;

variable CompassMainHeaderTitle

const CompassMainHeaderTitle: React.FunctionComponent<CompassMainHeaderTitleProps>;

variable CompassMainHeaderToolbar

const CompassMainHeaderToolbar: React.FunctionComponent<CompassMainHeaderToolbarProps>;

variable CompassMessageBar

const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps>;

variable CompassNavContent

const CompassNavContent: React.FunctionComponent<CompassNavContentProps>;

variable CompassNavHome

const CompassNavHome: React.FunctionComponent<CompassNavHomeProps>;

variable CompassNavMain

const CompassNavMain: React.FunctionComponent<CompassNavMainProps>;

variable CompassNavSearch

const CompassNavSearch: React.FunctionComponent<CompassNavSearchProps>;

variable Content

const Content: React.FunctionComponent<ContentProps>;

variable DataList

const DataList: any;

variable DataListAction

const DataListAction: React.FunctionComponent<DataListActionProps>;

variable DataListBase

const DataListBase: React.FunctionComponent<DataListProps>;

variable DataListCell

const DataListCell: FunctionComponent<DataListCellProps>;

variable DataListCheck

const DataListCheck: React.FunctionComponent<DataListCheckProps>;

variable DataListContent

const DataListContent: React.FunctionComponent<DataListContentProps>;

variable DataListContext

const DataListContext: any;

variable DataListControl

const DataListControl: React.FunctionComponent<DataListControlProps>;

variable DataListDragButton

const DataListDragButton: React.FunctionComponent<DataListDragButtonProps>;

variable DataListItemCells

const DataListItemCells: React.FunctionComponent<DataListItemCellsProps>;

variable DataListItemRow

const DataListItemRow: React.FunctionComponent<DataListItemRowProps>;

variable DataListText

const DataListText: React.FunctionComponent<DataListTextProps>;

variable DataListToggle

const DataListToggle: React.FunctionComponent<DataListToggleProps>;

variable DatePicker

const DatePicker: any;

variable DescriptionList

const DescriptionList: React.FunctionComponent<DescriptionListProps>;

variable DescriptionListDescription

const DescriptionListDescription: React.FunctionComponent<DescriptionListDescriptionProps>;

variable DescriptionListGroup

const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupProps>;

variable DescriptionListTerm

const DescriptionListTerm: React.FunctionComponent<DescriptionListTermProps>;

variable DescriptionListTermHelpText

const DescriptionListTermHelpText: React.FunctionComponent<DescriptionListTermHelpTextProps>;

variable DescriptionListTermHelpTextButton

const DescriptionListTermHelpTextButton: React.FunctionComponent<DescriptionListTermHelpTextButtonProps>;

variable Divider

const Divider: React.FunctionComponent<DividerProps>;

variable Drawer

const Drawer: React.FunctionComponent<DrawerProps>;

variable DrawerActions

const DrawerActions: React.FunctionComponent<DrawerActionsProps>;

variable DrawerCloseButton

const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps>;

variable DrawerContent

const DrawerContent: React.FunctionComponent<DrawerContentProps>;

variable DrawerContentBody

const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps>;

variable DrawerContext

const DrawerContext: any;

variable DrawerHead

const DrawerHead: React.FunctionComponent<DrawerHeadProps>;

variable DrawerPanelBody

const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps>;

variable DrawerPanelContent

const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps>;

variable DrawerPanelDescription

const DrawerPanelDescription: React.FunctionComponent<DrawerPanelDescriptionProps>;

variable DrawerSection

const DrawerSection: React.FunctionComponent<DrawerSectionProps>;

variable DrilldownMenu

const DrilldownMenu: React.FunctionComponent<DrilldownMenuProps>;

const Dropdown: any;

variable DropdownGroup

const DropdownGroup: React.FunctionComponent<DropdownGroupProps>;

variable DropdownItem

const DropdownItem: any;

variable DropdownList

const DropdownList: React.FunctionComponent<MenuListProps>;

variable DualListSelector

const DualListSelector: React.FunctionComponent<DualListSelectorProps>;

variable DualListSelectorControl

const DualListSelectorControl: any;

variable DualListSelectorControlBase

const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps>;

variable DualListSelectorControlsWrapper

const DualListSelectorControlsWrapper: any;

variable DualListSelectorControlsWrapperBase

const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualListSelectorControlsWrapperProps>;

variable DualListSelectorList

const DualListSelectorList: any;

variable DualListSelectorListBase

const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps>;

variable DualListSelectorListItem

const DualListSelectorListItem: any;

variable DualListSelectorListItemBase

const DualListSelectorListItemBase: React.FunctionComponent<DualListSelectorListItemProps>;

variable DualListSelectorPane

const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps>;

variable DualListSelectorTree

const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeProps>;

variable EmptyState

const EmptyState: React.FunctionComponent<EmptyStateProps>;

variable EmptyStateActions

const EmptyStateActions: React.FunctionComponent<EmptyStateActionsProps>;

variable EmptyStateBody

const EmptyStateBody: React.FunctionComponent<EmptyStateBodyProps>;

variable EmptyStateFooter

const EmptyStateFooter: React.FunctionComponent<EmptyStateFooterProps>;

variable ExpandableSectionToggle

const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps>;

variable FileUpload

const FileUpload: React.FunctionComponent<FileUploadProps>;

variable FileUploadField

const FileUploadField: React.FunctionComponent<FileUploadFieldProps>;

variable FileUploadHelperText

const FileUploadHelperText: React.FunctionComponent<FileUploadHelperTextProps>;

variable Flex

const Flex: React.FunctionComponent<FlexProps>;

variable FlexItem

const FlexItem: React.FunctionComponent<FlexItemProps>;

variable FocusTrap

const FocusTrap: any;

variable Form

const Form: any;

variable FormAlert

const FormAlert: React.FunctionComponent<FormAlertProps>;

variable FormContextConsumer

const FormContextConsumer: any;

variable FormContextProvider

const FormContextProvider: React.FC<FormContextProviderProps>;

variable FormFieldGroup

const FormFieldGroup: React.FunctionComponent<FormFieldGroupProps>;

variable FormFieldGroupExpandable

const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExpandableProps>;

variable FormFieldGroupHeader

const FormFieldGroupHeader: React.FunctionComponent<FormFieldGroupHeaderProps>;

variable FormGroup

const FormGroup: React.FunctionComponent<FormGroupProps>;

variable FormGroupLabelHelp

const FormGroupLabelHelp: any;

variable FormHelperText

const FormHelperText: React.FunctionComponent<FormHelperTextProps>;

variable FormSection

const FormSection: React.FunctionComponent<FormSectionProps>;

variable FormSelectOption

const FormSelectOption: React.FunctionComponent<FormSelectOptionProps>;

variable FormSelectOptionGroup

const FormSelectOptionGroup: React.FunctionComponent<FormSelectOptionGroupProps>;

variable Gallery

const Gallery: React.FunctionComponent<GalleryProps>;

variable GalleryItem

const GalleryItem: React.FunctionComponent<GalleryItemProps>;

variable GenerateId

const GenerateId: {
    ({ prefix, children }: GenerateIdProps): any;
    displayName: string;
};

variable globalBreakpoints

const globalBreakpoints: { md: number; lg: number; xl: number; '2xl': number };

variable globalHeightBreakpoints

const globalHeightBreakpoints: {
    sm: number;
    md: number;
    lg: number;
    xl: number;
    '2xl': number;
};

variable globalWidthBreakpoints

const globalWidthBreakpoints: {
    sm: number;
    md: number;
    lg: number;
    xl: number;
    '2xl': number;
};

variable Grid

const Grid: React.FunctionComponent<GridProps>;

variable GridItem

const GridItem: React.FunctionComponent<GridItemProps>;

variable HelperText

const HelperText: React.FunctionComponent<HelperTextProps>;

variable HelperTextItem

const HelperTextItem: React.FunctionComponent<HelperTextItemProps>;

variable Hero

const Hero: React.FunctionComponent<HeroProps>;

variable Hint

const Hint: React.FunctionComponent<HintProps>;

variable HintBody

const HintBody: React.FunctionComponent<HintBodyProps>;

variable HintFooter

const HintFooter: React.FunctionComponent<HintFooterProps>;

variable HintTitle

const HintTitle: React.FunctionComponent<HintTitleProps>;

variable Icon

const Icon: React.FunctionComponent<IconComponentProps>;

variable InputGroup

const InputGroup: any;

variable InputGroupBase

const InputGroupBase: React.FunctionComponent<InputGroupProps>;

variable InputGroupItem

const InputGroupItem: React.FunctionComponent<InputGroupItemProps>;

variable InputGroupText

const InputGroupText: React.FunctionComponent<InputGroupTextProps>;

variable JumpLinks

const JumpLinks: React.FunctionComponent<JumpLinksProps>;

variable JumpLinksItem

const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps>;

variable JumpLinksList

const JumpLinksList: React.FunctionComponent<JumpLinksListProps>;

variable KEYHANDLER_DIRECTION

const KEYHANDLER_DIRECTION: {
    UP: string;
    DOWN: string;
    RIGHT: string;
    LEFT: string;
};

variable KeyTypes

const KeyTypes: {
    Tab: string;
    Space: string;
    Escape: string;
    Enter: string;
    ArrowUp: string;
    ArrowDown: string;
    ArrowLeft: string;
    ArrowRight: string;
};

variable Label

const Label: React.FunctionComponent<LabelProps>;

variable Level

const Level: React.FunctionComponent<LevelProps>;

variable LevelItem

const LevelItem: React.FunctionComponent<LevelItemProps>;

variable List

const List: React.FunctionComponent<ListProps>;

variable ListItem

const ListItem: React.FunctionComponent<ListItemProps>;

const Login: React.FunctionComponent<LoginProps>;

variable LoginFooter

const LoginFooter: React.FunctionComponent<LoginFooterProps>;

variable LoginFooterItem

const LoginFooterItem: React.FunctionComponent<LoginFooterItemProps>;

variable LoginForm

const LoginForm: React.FunctionComponent<LoginFormProps>;

variable LoginHeader

const LoginHeader: React.FunctionComponent<LoginHeaderProps>;

variable LoginMainBody

const LoginMainBody: React.FunctionComponent<LoginMainBodyProps>;

variable LoginMainFooter

const LoginMainFooter: React.FunctionComponent<LoginMainFooterProps>;

variable LoginMainFooterBandItem

const LoginMainFooterBandItem: React.FunctionComponent<LoginMainFooterBandItemProps>;

variable LoginMainFooterLinksItem

const LoginMainFooterLinksItem: React.FunctionComponent<LoginMainFooterLinksItemProps>;

variable LoginMainHeader

const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps>;

variable LoginPage

const LoginPage: React.FunctionComponent<LoginPageProps>;

const Masthead: React.FunctionComponent<MastheadProps>;

variable MastheadBrand

const MastheadBrand: React.FunctionComponent<MastheadBrandProps>;

variable MastheadContent

const MastheadContent: React.FunctionComponent<MastheadContentProps>;

variable MastheadLogo

const MastheadLogo: React.FunctionComponent<MastheadLogoProps>;

variable MastheadMain

const MastheadMain: React.FunctionComponent<MastheadMainProps>;

variable MastheadToggle

const MastheadToggle: React.FunctionComponent<MastheadToggleProps>;

const Menu: any;

variable MenuBreadcrumb

const MenuBreadcrumb: React.FunctionComponent<MenuBreadcrumbProps>;

variable MenuContainer

const MenuContainer: React.FunctionComponent<MenuContainerProps>;

Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.

variable MenuContent

const MenuContent: any;

variable MenuFooter

const MenuFooter: React.FunctionComponent<MenuFooterProps>;

variable MenuGroup

const MenuGroup: any;

variable MenuItem

const MenuItem: any;

variable MenuItemAction

const MenuItemAction: any;

variable MenuList

const MenuList: React.FunctionComponent<MenuListProps>;

variable MenuSearch

const MenuSearch: any;

variable MenuSearchInput

const MenuSearchInput: any;

variable MenuToggle

const MenuToggle: any;

variable ModalBody

const ModalBody: React.FunctionComponent<ModalBodyProps>;

variable ModalFooter

const ModalFooter: React.FunctionComponent<ModalFooterProps>;

variable ModalHeader

const ModalHeader: React.FunctionComponent<ModalHeaderProps>;

variable MultipleFileUpload

const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps>;

variable MultipleFileUploadContext

const MultipleFileUploadContext: any;

variable MultipleFileUploadMain

const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadMainProps>;

variable MultipleFileUploadStatus

const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploadStatusProps>;

variable MultipleFileUploadStatusItem

const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileUploadStatusItemProps>;

variable NavContext

const NavContext: any;

variable navContextDefaults

const navContextDefaults: {};

variable NavGroup

const NavGroup: React.FunctionComponent<NavGroupProps>;

variable NavItem

const NavItem: any;

variable NavItemSeparator

const NavItemSeparator: React.FunctionComponent<DividerProps>;

variable NotificationBadge

const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>;

variable NotificationDrawer

const NotificationDrawer: any;

variable NotificationDrawerBody

const NotificationDrawerBody: React.FunctionComponent<NotificationDrawerBodyProps>;

variable NotificationDrawerGroup

const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawerGroupProps>;

variable NotificationDrawerGroupList

const NotificationDrawerGroupList: React.FunctionComponent<NotificationDrawerGroupListProps>;

variable NotificationDrawerHeader

const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawerHeaderProps>;

variable NotificationDrawerList

const NotificationDrawerList: React.FunctionComponent<NotificationDrawerListProps>;

variable NotificationDrawerListItem

const NotificationDrawerListItem: React.FunctionComponent<NotificationDrawerListItemProps>;

variable NotificationDrawerListItemBody

const NotificationDrawerListItemBody: React.FunctionComponent<NotificationDrawerListItemBodyProps>;

variable NotificationDrawerListItemHeader

const NotificationDrawerListItemHeader: React.FunctionComponent<NotificationDrawerListItemHeaderProps>;

variable NumberInput

const NumberInput: React.FunctionComponent<NumberInputProps>;

variable OverflowMenuContent

const OverflowMenuContent: React.FunctionComponent<OverflowMenuContentProps>;

variable OverflowMenuControl

const OverflowMenuControl: React.FunctionComponent<OverflowMenuControlProps>;

variable OverflowMenuDropdownItem

const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropdownItemProps>;

variable OverflowMenuGroup

const OverflowMenuGroup: React.FunctionComponent<OverflowMenuGroupProps>;

variable OverflowMenuItem

const OverflowMenuItem: React.FunctionComponent<OverflowMenuItemProps>;

variable PageBody

const PageBody: React.FunctionComponent<PageBodyProps>;

variable PageBreadcrumb

const PageBreadcrumb: {
    ({
        className,
        children,
        isWidthLimited,
        stickyOnBreakpoint,
        hasShadowTop,
        hasShadowBottom,
        hasOverflowScroll,
        'aria-label': ariaLabel,
        hasBodyWrapper,
        ...props
    }: PageBreadcrumbProps): any;
    displayName: string;
};

variable PageContext

const PageContext: any;

variable PageContextConsumer

const PageContextConsumer: any;

variable pageContextDefaults

const pageContextDefaults: PageContextProps;

variable PageContextProvider

const PageContextProvider: any;

variable PageGroup

const PageGroup: {
    ({
        className,
        children,
        stickyOnBreakpoint,
        stickyBase,
        isStickyStuck,
        isFilled,
        hasShadowTop,
        hasShadowBottom,
        hasOverflowScroll,
        'aria-label': ariaLabel,
        isPlain,
        isNoPlainOnGlass,
        ...props
    }: PageGroupProps): any;
    displayName: string;
};

variable PageSection

const PageSection: React.FunctionComponent<PageSectionProps>;

variable PageSidebar

const PageSidebar: React.FunctionComponent<PageSidebarProps>;

variable PageSidebarBody

const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps>;

variable PageSidebarContext

const PageSidebarContext: any;

variable pageSidebarContextDefaults

const pageSidebarContextDefaults: PageSidebarContextProps;

variable PageToggleButton

const PageToggleButton: React.FunctionComponent<PageToggleButtonProps>;

const Pagination: React.FunctionComponent<PaginationProps>;

variable Panel

const Panel: any;

variable PanelFooter

const PanelFooter: React.FunctionComponent<PanelFooterProps>;

variable PanelHeader

const PanelHeader: React.FunctionComponent<PanelHeaderProps>;

variable PanelMain

const PanelMain: React.FunctionComponent<PanelMainProps>;

variable PanelMainBody

const PanelMainBody: React.FunctionComponent<PanelMainBodyProps>;

const Popover: React.FunctionComponent<PopoverProps>;

variable Popper

const Popper: React.FunctionComponent<PopperProps>;

variable ProgressBar

const ProgressBar: React.FunctionComponent<ProgressBarProps>;

variable ProgressContainer

const ProgressContainer: React.FunctionComponent<ProgressContainerProps>;

variable ProgressStep

const ProgressStep: React.FunctionComponent<ProgressStepProps>;

variable ProgressStepper

const ProgressStepper: React.FunctionComponent<ProgressStepperProps>;

variable SearchInput

const SearchInput: any;

variable Select

const Select: any;

variable SelectGroup

const SelectGroup: React.FunctionComponent<SelectGroupProps>;

variable SelectList

const SelectList: React.FunctionComponent<MenuListProps>;

variable SelectOption

const SelectOption: any;

variable SIDE

const SIDE: { RIGHT: string; LEFT: string; BOTH: string; NONE: string };

const Sidebar: React.FunctionComponent<SidebarProps>;

variable SidebarContent

const SidebarContent: React.FunctionComponent<SidebarContentProps>;

variable SidebarPanel

const SidebarPanel: React.FunctionComponent<SidebarPanelProps>;

variable SimpleListContext

const SimpleListContext: any;

variable SimpleListGroup

const SimpleListGroup: React.FunctionComponent<SimpleListGroupProps>;

variable Skeleton

const Skeleton: React.FunctionComponent<SkeletonProps>;

variable SkipToContent

const SkipToContent: React.FunctionComponent<SkipToContentProps>;

variable Slider

const Slider: React.FunctionComponent<SliderProps>;

variable Spinner

const Spinner: React.FunctionComponent<SpinnerProps>;

variable Split

const Split: React.FunctionComponent<SplitProps>;

variable SplitItem

const SplitItem: React.FunctionComponent<SplitItemProps>;

variable SSRSafeIds

const SSRSafeIds: {
    ({ prefix, ouiaComponentType, children }: SSRSafeIdsProps): any;
    displayName: string;
};

Provides SSR/Strict-Mode-safe IDs for class components via render props. Uses useSSRSafeId() (React.useId) for both component ID and OUIA ID, ensuring consistent values between server and client rendering.

variable Stack

const Stack: React.FunctionComponent<StackProps>;

variable StackItem

const StackItem: React.FunctionComponent<StackItemProps>;

variable statusIcons

const statusIcons: {
    success: any;
    danger: any;
    warning: any;
    info: any;
    custom: any;
};

variable Tab

const Tab: any;

variable TabAction

const TabAction: any;

variable TabContent

const TabContent: any;

variable TabContentBody

const TabContentBody: React.FunctionComponent<TabContentBodyProps>;

variable TabsContext

const TabsContext: any;

variable TabsContextConsumer

const TabsContextConsumer: any;

variable TabsContextProvider

const TabsContextProvider: any;

variable TabTitleIcon

const TabTitleIcon: React.FunctionComponent<TabTitleIconProps>;

variable TabTitleText

const TabTitleText: React.FunctionComponent<TabTitleTextProps>;

variable TextArea

const TextArea: any;

variable TextInput

const TextInput: any;

variable TextInputGroup

const TextInputGroup: React.FunctionComponent<TextInputGroupProps>;

variable TextInputGroupContext

const TextInputGroupContext: any;

variable TextInputGroupMain

const TextInputGroupMain: any;

variable TextInputGroupUtilities

const TextInputGroupUtilities: React.FunctionComponent<TextInputGroupUtilitiesProps>;

variable Timestamp

const Timestamp: React.FunctionComponent<TimestampProps>;

variable Title

const Title: React.FunctionComponent<TitleProps>;

variable ToggleGroup

const ToggleGroup: React.FunctionComponent<ToggleGroupProps>;

variable ToggleGroupItem

const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps>;

variable ToggleTemplate

const ToggleTemplate: React.FunctionComponent<PaginationToggleTemplateProps>;

variable ToolbarContentContext

const ToolbarContentContext: any;

variable ToolbarContext

const ToolbarContext: any;

variable ToolbarExpandIconWrapper

const ToolbarExpandIconWrapper: React.FunctionComponent<ToolbarExpandIconWrapperProps>;

variable ToolbarGroup

const ToolbarGroup: any;

variable ToolbarItem

const ToolbarItem: React.FunctionComponent<ToolbarItemProps>;

const Tooltip: React.FunctionComponent<TooltipProps>;

variable TreeView

const TreeView: React.FunctionComponent<TreeViewProps>;

variable TreeViewSearch

const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps>;

variable Truncate

const Truncate: any;

variable useIsomorphicLayoutEffect

const useIsomorphicLayoutEffect: any;

Small wrapper around useLayoutEffect to get rid of the warning on SSR envs

variable variantIcons

const variantIcons: {
    success: any;
    danger: any;
    warning: any;
    info: any;
    custom: any;
};

variable Wizard

const Wizard: {
    ({
        children,
        footer,
        height,
        width,
        className,
        header,
        nav,
        navAriaLabel,
        startIndex,
        isVisitRequired,
        isProgressive,
        onStepChange,
        onSave,
        onClose,
        shouldFocusContent,
        isPlain,
        isNoPlainOnGlass,
        ...wrapperProps
    }: WizardProps): any;
    displayName: string;
};

variable WizardBody

const WizardBody: {
    ({
        children,
        className,
        hasNoPadding,
        'aria-label': ariaLabel,
        'aria-labelledby': ariaLabelledBy,
        component,
        ...props
    }: WizardBodyProps): any;
    displayName: string;
};

variable WizardContext

const WizardContext: any;

variable WizardFooter

const WizardFooter: {
    ({ activeStep, ...internalProps }: WizardFooterProps): any;
    displayName: string;
};

variable WizardFooterWrapper

const WizardFooterWrapper: {
    ({ children, className, ...props }: WizardFooterWrapperProps): any;
    displayName: string;
};

variable WizardHeader

const WizardHeader: React.FunctionComponent<WizardHeaderProps>;

variable WizardNav

const WizardNav: React.FunctionComponent<WizardNavProps>;

variable WizardNavItem

const WizardNavItem: {
    ({
        children,
        content,
        isCurrent,
        isDisabled,
        isVisited,
        stepIndex,
        onClick,
        component: NavItemComponent,
        href,
        isExpandable,
        id,
        status,
        target,
        ouiaId,
        ouiaSafe,
        className,
        ...props
    }: WizardNavItemProps): any;
    displayName: string;
};

variable WizardStep

const WizardStep: {
    ({ children, steps: _subSteps, ...props }: WizardStepProps): any;
    displayName: string;
};

variable WizardToggle

const WizardToggle: {
    ({
        steps,
        activeStep,
        footer,
        nav,
        isNavExpanded,
        toggleNavExpanded,
        'aria-label': ariaLabel,
    }: WizardToggleProps): any;
    displayName: string;
};

Functions

function capitalize

capitalize: (input: string) => string;

Parameter input
String to capitalize first letter

function clearTimeouts

clearTimeouts: (timeoutRefs: React.RefObject<any>[]) => void;

Parameter timeoutRefs
Timeout refs to clear

function clipboardCopyFunc

clipboardCopyFunc: (
    _event: React.ClipboardEvent<HTMLDivElement>,
    text?: React.ReactNode
) => void;

function debounce

debounce: (
    this: any,
    func: (...args: any[]) => any,
    wait: number
) => (...args: any[]) => void;

Parameter this
"This" reference
Parameter func
Function to debounce
Parameter wait
Debounce amount

function fillTemplate

fillTemplate: (templateString: string, templateVars: any) => string;

Interpolates a parameterized templateString using values from a templateVars object. The templateVars object should have keys and values which match the templateString's parameters. Example: const templateString: 'My name is ${firstName} ${lastName}'; const templateVars: { firstName: 'Jon' lastName: 'Dough' }; const result = fillTemplate(templateString, templateVars); // "My name is Jon Dough"
Parameter templateString
The string passed by the consumer
Parameter templateVars
The variables passed to the string
Returns
{string} The template string literal result

function findTabbableElements

findTabbableElements: (containerRef: any, tababbleSelectors: string) => any[];

This function returns a list of tabbable items in a container
Parameter containerRef
to the container
Parameter tababbleSelectors
CSS selector string of tabbable items

function formatBreakpointMods

formatBreakpointMods: (
    mods: Mods,
    styles: any,
    stylePrefix?: string,
    breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl',
    vertical?: boolean
) => any;

This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
Parameter mods
The modifiers object
Parameter styles
The appropriate styles object for the component

function getBreakpoint

getBreakpoint: (width: number) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

Return the breakpoint for the given width
Parameter width
The width to check
Returns
{'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint

function getDefaultOUIAId

getDefaultOUIAId: (componentType: string, variant?: string) => string;

Legacy counter-based OUIA ID generator for class components that cannot use hooks. Prefer useOUIAId or useOUIAProps for functional components.
Deprecated
Use useOUIAId in functional components instead.

function getInlineStartProperty

getInlineStartProperty: (
    targetElement: HTMLElement,
    ancestorElement: HTMLElement,
    inlineType?: 'client' | 'offset' | 'scroll'
) => number;

Gets the [client|offset|scroll]Left property of an element, and determines whether it needs to be adjusted for an RTL direction.
Parameter targetElement
Element to get the inline-start property of.
Parameter ancestorElement
Ancestor element to base the inline-start calculation off of when the direction is RTL.
Parameter inlineType
The inline-start property type to base calculations on.
Returns
{number} - The value of the inline-start property.

function getLanguageDirection

getLanguageDirection: (
    targetElement: HTMLElement,
    defaultDirection?: 'ltr' | 'rtl'
) => 'ltr' | 'rtl';

Helper function to get the language direction of a given element, useful for figuring out if left-to-right or right-to-left specific logic should be applied.
Parameter targetElement
Element the helper will get the language direction of
Parameter defaultDirection
Language direction to assume if one can't be determined, defaults to 'ltr'
Returns
{'ltr' | 'rtl'} - The language direction of the target element

function getNextIndex

getNextIndex: (index: number, position: string, collection: any[]) => number;

This function is a helper for keyboard navigation through dropdowns.
Parameter index
The index of the element you're on
Parameter position
The orientation of the dropdown
Parameter collection
Array of refs to the items in the dropdown

function getOpacityTransition

getOpacityTransition: (animationDuration: number) => string;

function getOUIAProps

getOUIAProps: (
    componentType: string,
    id: OuiaId,
    ouiaSafe?: boolean
) => {
    'data-ouia-component-type': string;
    'data-ouia-safe': boolean;
    'data-ouia-component-id': OuiaId;
};

Get props to conform to OUIA spec. For functional components, use the useOUIAProps hook instead.
Parameter componentType
OUIA component type
Parameter id
OUIA component id
Parameter ouiaSafe
false if in animation

function getReferenceElement

getReferenceElement: (
    refProp: HTMLElement | (() => HTMLElement) | React.RefObject<any>
) => any;

Gets a reference element based on a ref property, which can typically be 1 of several types.
Parameter refProp
The ref property to get a reference element from.
Returns
The reference element if one is found.

function getResizeObserver

getResizeObserver: (
    containerRefElement: Element,
    handleResize: () => void,
    useRequestAnimationFrame?: boolean
) => () => void;

This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver or the given containerRef are not available, a window resize event listener is used by default.
Example 1:
private containerRef = createRef(); private observer: any = () => {};
public componentDidMount() { this.observer = getResizeObserver(this.containerRef.current, this.handleResize, true); }
public componentWillUnmount() { this.observer(); }
private handleResize = () => { if (this.containerRef.current && this.containerRef.current.clientWidth) { this.setState({ width: this.containerRef.current.clientWidth }); } };
public render() { return ( <div ref={this.containerRef} > <Chart width={this.state.width} ... /> ); }
Example 2:
private inputRef = createRef(); private observer: any = () => {};
public componentDidMount() { this.observer = getResizeObserver(this.inputRef.current, this.handleResize, true); }
public componentWillUnmount() { this.observer(); }
private handleResize = () => { if (this.inputRef.current) { trimLeft(inputRef.current, String(this.props.value)); } };
public render() { return ( <input ref={this.inputRef} ... /> ); }
Example 3 - With debounced method passed in:
public componentDidMount() { this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250)); }
Parameter containerRefElement
The container reference to observe
Parameter handleResize
The function to call for resize events
Parameter useRequestAnimationFrame
Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in true when the function passed in is not debounced. {Function} The function used to unobserve resize events

function getTextWidth

getTextWidth: (text: string, node: HTMLElement) => number;

Calculate the width of the text Example: getTextWidth('my text', node)
Parameter text
The text to calculate the width for
Parameter node
The HTML element

function getUniqueId

getUniqueId: (prefix?: string) => string;

Parameter prefix
String to prefix ID with

function getVerticalBreakpoint

getVerticalBreakpoint: (
    height: number
) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

Return the breakpoint for the given height
Parameter height
The height to check
Returns
{'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint

function handleArrows

handleArrows: (
    event: KeyboardEvent,
    navigableElements: Element[],
    isActiveElement?: (element: Element) => boolean,
    getFocusableElement?: (element: Element) => Element,
    validSiblingTags?: string[],
    noVerticalArrowHandling?: boolean,
    noHorizontalArrowHandling?: boolean,
    updateTabIndex?: boolean,
    onlyTraverseSiblings?: boolean
) => void;

This function is a helper for handling basic arrow keyboard interactions. If a component already has its own key handler and event start up/tear down, this function may be easier to integrate in over the full component.
Parameter event
Event triggered by the keyboard
Parameter navigableElements
Valid traversable elements of the container
Parameter isActiveElement
Callback to determine if a given element from the navigable elements array is the active element of the page
Parameter getFocusableElement
Callback returning the focusable element of a given element from the navigable elements array
Parameter validSiblingTags
Valid sibling tags that horizontal arrow handling will focus
Parameter noVerticalArrowHandling
Flag indicating that the included vertical arrow key handling should be ignored
Parameter noHorizontalArrowHandling
Flag indicating that the included horizontal arrow key handling should be ignored
Parameter updateTabIndex
Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex
Parameter onlyTraverseSiblings
Flag indicating that next focusable element of a horizontal movement will be this element's sibling

function innerDimensions

innerDimensions: (node: HTMLElement) => { height: number; width: number };

Get the inner dimensions of an element
Parameter node
HTML element to calculate the inner dimensions for

function isCustomWizardFooter

isCustomWizardFooter: (footer: WizardFooterType) => footer is any;

function isCustomWizardNav

isCustomWizardNav: (nav: WizardNavType) => nav is any;

function isCustomWizardNavItem

isCustomWizardNavItem: (navItem: WizardNavItemType) => navItem is any;

function isElementInView

isElementInView: (
    container: HTMLElement,
    element: HTMLElement,
    partial: boolean,
    strict?: boolean
) => boolean;

This function returns whether or not an element is within the viewable area of a container. If partial is true, then this function will return true even if only part of the element is in view.
Parameter container
The container to check if the element is in view of.
Parameter element
The element to check if it is view
Parameter partial
true if partial view is allowed
Parameter strict
true if strict mode is set, never consider the container width and element width
Returns
{ boolean } True if the component is in View.

function isValidDate

isValidDate: (date?: Date) => boolean;

Parameter date
A date to check the validity of

function isWizardBasicStep

isWizardBasicStep: (step: WizardStepType) => step is WizardBasicStep;

function isWizardParentStep

isWizardParentStep: (step: WizardStepType) => step is WizardParentStep;

function isWizardSubStep

isWizardSubStep: (step: WizardStepType) => step is WizardSubStep;

function keyHandler

keyHandler: (
    index: number,
    innerIndex: number,
    position: string,
    refsCollection: any[],
    kids: any[],
    custom?: boolean
) => void;

This function allows for keyboard navigation through dropdowns. The custom argument is optional.
Parameter index
The index of the element you're on
Parameter innerIndex
Inner index number
Parameter position
The orientation of the dropdown
Parameter refsCollection
Array of refs to the items in the dropdown
Parameter kids
Array of items in the dropdown
Parameter custom
Allows for handling of flexible content

function onToggleArrowKeydownDefault

onToggleArrowKeydownDefault: (
    event: KeyboardEvent,
    menuRef: React.RefObject<HTMLDivElement>
) => void;

This function is used in Dropdown, Select and MenuContainer as a default toggle keydown behavior. When the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.
Parameter event
Event triggered by the keyboard
Parameter menuRef
Menu reference

function pluralize

pluralize: (i: number, singular: string, plural?: string) => string;

This function is a helper for pluralizing strings.
Parameter i
The quantity of the string you want to pluralize
Parameter singular
The singular version of the string
Parameter plural
The change to the string that should occur if the quantity is not equal to 1. Defaults to adding an 's'.

function preventedEvents

preventedEvents: (events: string[]) => {};

Parameter events
Operations to prevent when disabled

function setBreakpointCssVars

setBreakpointCssVars: (
    mods: {
        default?: string;
        sm?: string;
        md?: string;
        lg?: string;
        xl?: string;
        '2xl'?: string;
        '3xl'?: string;
    },
    cssVar: string
) => React.CSSProperties;

This function is a helper for turning arrays of breakpointMod objects for flex and grid into style object
Parameter mods
The modifiers object
Parameter css
variable The appropriate css variable for the component

function setTabIndex

setTabIndex: (options: HTMLElement[]) => void;

This function is a helper for setting the initial tabIndexes in a roving tabIndex
Parameter options
Array of elements which should have a tabIndex of -1, except for the first element which will have a tabIndex of 0

function sideElementIsOutOfView

sideElementIsOutOfView: (container: HTMLElement, element: HTMLElement) => string;

This function returns the side the element is out of view on (right, left or both)
Parameter container
The container to check if the element is in view of.
Parameter element
The element to check if it is view
Returns
{string} right if the element is of the right, left if element is off the left or both if it is off on both sides.

function toCamel

toCamel: (s: string) => string;

Parameter s
string to make camelCased

function trimLeft

trimLeft: (node: HTMLElement, value: string) => void;

This function is a helper for truncating text content on the left, leaving the right side of the content in view
Parameter node
HTML element
Parameter value
The original text value

function useAnimationsConfig

useAnimationsConfig: () => AnimationsConfig;

Hook to access the animations configuration from the nearest AnimationsProvider.

This hook allows components to check if animations are enabled and override their local hasAnimations prop accordingly.

Returns

The animations configuration object

Example 1

const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
  const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
  const hasAnimations = hasAnimationsProp ?? contextHasAnimations;

  return <div className={hasAnimations ? 'with-animations' : ''} {...props} />;
};

function useFormContext

useFormContext: () => FormContextProps;

function useHasAnimations

useHasAnimations: (hasAnimationsProp?: boolean) => boolean;

Utility hook that combines local hasAnimations prop with context configuration. The local prop takes precedence when explicitly set, otherwise falls back to context.
Parameter hasAnimationsProp
The hasAnimations prop passed directly to the component
Returns
The resolved hasAnimations value
Example 1
const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => { const hasAnimations = useHasAnimations(hasAnimationsProp); return <div className={hasAnimations ? 'animated' : 'static'} {...props} />; };

function useInterval

useInterval: (callback: () => void, delay: number | null) => void;

function useOUIAId

useOUIAId: (componentType: string, id?: OuiaId, variant?: string) => OuiaId;

Returns the provided ID or a deterministic SSR-safe generated OUIA ID. Uses React.useId() under the hood for consistent server/client rendering.
Parameter componentType
OUIA component type
Parameter id
OUIA component id
Parameter variant
Optional variant to add to the generated ID

function useOUIAProps

useOUIAProps: (
    componentType: string,
    id?: OuiaId,
    ouiaSafe?: boolean,
    variant?: string
) => {
    'data-ouia-component-type': string;
    'data-ouia-safe': boolean;
    'data-ouia-component-id': OuiaId;
};

Hooks version of the getOUIAProps function with SSR-safe ID generation. Can only be used in functional components.
Parameter componentType
OUIA component type
Parameter id
OUIA component id
Parameter ouiaSafe
false if in animation
Parameter variant
Optional variant to add to the generated ID

function useSSRSafeId

useSSRSafeId: (prefix?: string) => string;

SSR-safe ID generation hook. Uses React.useId() when available (React 18+) for guaranteed SSR/CSR match. Falls back to a counter-based approach for React 17.

function useWizardContext

useWizardContext: () => WizardContextProps;

function useWizardFooter

useWizardFooter: (
    footer: React.ReactElement<any> | Partial<WizardFooterProps>,
    stepId?: string | number
) => void;

Set a unique footer for the wizard. stepId is only required if inactive steps are hidden instead of unmounted.
Parameter footer
Parameter stepId

function yyyyMMddFormat

yyyyMMddFormat: (date: Date) => string;

Classes

class Checkbox

class Checkbox extends Component<CheckboxProps> {}

property defaultProps

static defaultProps: PickOptional<CheckboxProps>;

property displayName

static displayName: string;

method render

render: () => any;

class ClipboardCopy

class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {}

constructor

constructor(props: ClipboardCopyProps);

property componentDidUpdate

componentDidUpdate: (
    prevProps: ClipboardCopyProps,
    prevState: ClipboardCopyState
) => void;

property componentWillUnmount

componentWillUnmount: () => void;

property defaultProps

static defaultProps: PickOptional<ClipboardCopyProps>;

property displayName

static displayName: string;

property expandContent

expandContent: (_event: React.MouseEvent<Element, MouseEvent>) => void;

property render

render: () => any;

property timer

timer: number;

property updateText

updateText: (event: React.FormEvent, text: string) => void;

property updateTextWhenExpanded

updateTextWhenExpanded: (event: React.FormEvent, text: string) => void;

class DataListItem

class DataListItem extends Component<DataListItemProps> {}

property defaultProps

static defaultProps: DataListItemProps;

property displayName

static displayName: string;

method render

render: () => any;

class ExpandableSection

class ExpandableSection extends Component<
    ExpandableSectionProps,
    ExpandableSectionState
> {}

constructor

constructor(props: ExpandableSectionProps);

property checkToggleVisibility

checkToggleVisibility: () => void;

property defaultProps

static defaultProps: PickOptional<ExpandableSectionProps>;

property displayName

static displayName: string;

property expandableContentRef

expandableContentRef: any;

property handleResize

handleResize: (...args: any[]) => void;

property observer

observer: any;

property resize

resize: () => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: ExpandableSectionProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => any;

class FormSelect

class FormSelect extends Component<FormSelectProps> {}

constructor

constructor(props: FormSelectProps);

property defaultProps

static defaultProps: PickOptional<FormSelectProps>;

property displayName

static displayName: string;

property handleChange

handleChange: (event: any) => void;

method render

render: () => any;

class KeyboardHandler

class KeyboardHandler extends Component<KeyboardHandlerProps> {}

property defaultProps

static defaultProps: KeyboardHandlerProps;

property displayName

static displayName: string;

property keyHandler

keyHandler: (event: KeyboardEvent) => void;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => any;

class LabelGroup

class LabelGroup extends Component<LabelGroupProps, LabelGroupState> {}

constructor

constructor(props: LabelGroupProps);

property defaultProps

static defaultProps: LabelGroupProps;

property displayName

static displayName: string;

property toggleCollapse

toggleCollapse: () => void;

method componentDidMount

componentDidMount: () => void;

method render

render: () => any;

method renderLabel

renderLabel: (id: string) => any;

class MenuToggleAction

class MenuToggleAction extends Component<MenuToggleActionProps> {}

property defaultProps

static defaultProps: MenuToggleActionProps;

property displayName

static displayName: string;

method render

render: () => any;

class MenuToggleCheckbox

class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps> {}

property calculateChecked

calculateChecked: () => boolean;

property defaultProps

static defaultProps: PickOptional<MenuToggleCheckboxProps>;

property displayName

static displayName: string;

property handleChange

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

method render

render: () => any;

class Modal extends Component<ModalProps, ModalState> {}

constructor(props: ModalProps);

backdropId: string;

boxId: string;

static currentId: number;

static defaultProps: PickOptional<ModalProps>;

static displayName: string;

getElement: (appendTo: HTMLElement | (() => HTMLElement)) => HTMLElement;

handleEscKeyClick: (event: KeyboardEvent) => void;

isEmpty: (value: string | null | undefined) => boolean;

toggleSiblingsFromScreenReaders: (hide: boolean) => void;

componentDidMount: () => void;

componentDidUpdate: (prevProps: ModalProps) => void;

componentWillUnmount: () => void;

render: () => any;

class Nav

class Nav extends Component<
    NavProps,
    {
        isScrollable: boolean;
        flyoutRef: React.Ref<HTMLLIElement> | null;
    }
> {}

property defaultProps

static defaultProps: NavProps;

property displayName

static displayName: string;

property navRef

navRef: any;

property state

state: { isScrollable: boolean; flyoutRef: any };

method onSelect

onSelect: (
    event: React.FormEvent<HTMLInputElement>,
    groupId: number | string,
    itemId: number | string,
    to: string,
    preventDefault: boolean,
    onClick: NavSelectClickHandler
) => void;

method onToggle

onToggle: (
    event: React.MouseEvent<HTMLButtonElement>,
    groupId: number | string,
    toggleValue: boolean
) => void;

method render

render: () => any;

class NavExpandable

class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {}

property defaultProps

static defaultProps: PickOptional<NavExpandableProps>;

property displayName

static displayName: string;

property onExpand

onExpand: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
    onToggle: (
        event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
        groupId: string | number,
        expandedState: boolean
    ) => void
) => void;

property state

state: { expandedState: boolean };

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: NavExpandableProps) => void;

method render

render: () => any;

class NavList

class NavList extends Component<NavListProps> {}

property context

context: React.ContextType<any>;

property contextType

static contextType: any;

property defaultProps

static defaultProps: NavListProps;

property displayName

static displayName: string;

property handleScrollButtons

handleScrollButtons: () => void;

property navList

navList: any;

property observer

observer: any;

property scrollBack

scrollBack: () => void;

property scrollForward

scrollForward: () => void;

property state

state: { scrollViewAtStart: boolean; scrollViewAtEnd: boolean };

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => any;

class OverflowMenu

class OverflowMenu extends Component<OverflowMenuProps, OverflowMenuState> {}

constructor

constructor(props: OverflowMenuProps);

property defaultProps

static defaultProps: PickOptional<OverflowMenuProps>;

property displayName

static displayName: string;

property handleResize

handleResize: () => void;

property handleResizeHeight

handleResizeHeight: () => void;

property handleResizeWidth

handleResizeWidth: () => void;

property handleResizeWithDelay

handleResizeWithDelay: (...args: any[]) => void;

property observer

observer: any;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: Readonly<OverflowMenuProps>,
    prevState: Readonly<OverflowMenuState>
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method getBreakpointRef

getBreakpointRef: () => any;

method render

render: () => any;

class Page

class Page extends Component<PageProps, PageState> {}

constructor

constructor(props: PageProps);

property defaultProps

static defaultProps: PageProps;

property displayName

static displayName: string;

property getWindowWidth

getWindowWidth: () => number;

property handleMainClick

handleMainClick: () => void;

property handleResize

handleResize: (...args: any[]) => void;

property isMobile

isMobile: () => boolean;

property mainRef

mainRef: any;

property observer

observer: any;

property onSidebarToggleDesktop

onSidebarToggleDesktop: () => void;

property onSidebarToggleMobile

onSidebarToggleMobile: () => void;

property pageRef

pageRef: any;

property resize

resize: (
    _event?: MouseEvent | TouchEvent | React.KeyboardEvent<Element>
) => void;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => any;

class Progress

class Progress extends Component<ProgressProps> {}

property defaultProps

static defaultProps: ProgressProps;

property displayName

static displayName: string;

method render

render: () => any;

class Radio

class Radio extends Component<RadioProps> {}

constructor

constructor(props: RadioProps);

property defaultProps

static defaultProps: PickOptional<RadioProps>;

property displayName

static displayName: string;

property handleChange

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

method render

render: () => any;

class SimpleList

class SimpleList extends Component<SimpleListProps, SimpleListState> {}

property defaultProps

static defaultProps: SimpleListProps;

property displayName

static displayName: string;

property handleCurrentUpdate

handleCurrentUpdate: (
    newCurrentRef:
        | React.RefObject<HTMLButtonElement | null>
        | React.RefObject<HTMLAnchorElement | null>,
    itemProps: SimpleListItemProps
) => void;

property state

state: {
    currentRef:
        | import('react').RefObject<HTMLButtonElement>
        | import('react').RefObject<HTMLAnchorElement>;
};

method render

render: () => any;

class SimpleListItem

class SimpleListItem extends Component<SimpleListItemProps> {}

property defaultProps

static defaultProps: SimpleListItemProps;

property displayName

static displayName: string;

property ref

ref: any;

method render

render: () => any;

class Switch

class Switch extends Component<SwitchProps & OUIAProps> {}

constructor

constructor(props: SwitchProps & OUIAProps);

property defaultProps

static defaultProps: SwitchProps;

property displayName

static displayName: string;

method render

render: () => any;

class Tabs

class Tabs extends Component<TabsProps, TabsState> {}

constructor

constructor(props: TabsProps);

property countOverflowingElements

countOverflowingElements: (container: HTMLUListElement) => number;

property defaultProps

static defaultProps: PickOptional<TabsProps>;

property displayName

static displayName: string;

property handleResize

handleResize: () => void;

property handleScrollButtons

handleScrollButtons: () => void;

property hideScrollButtons

hideScrollButtons: () => void;

property leftScrollButtonRef

leftScrollButtonRef: any;

property scrollBack

scrollBack: () => void;

property scrollForward

scrollForward: () => void;

property scrollTimeout

scrollTimeout: NodeJS.Timeout;

property setAccentStyles

setAccentStyles: (shouldInitializeStyle?: boolean) => void;

property tabList

tabList: any;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

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

method componentWillUnmount

componentWillUnmount: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: TabsProps,
    prevState: TabsState
) => { uncontrolledActiveKey: string | number; shownKeys: (string | number)[] };

method handleTabClick

handleTabClick: (
    event: React.MouseEvent<HTMLElement, MouseEvent>,
    eventKey: number | string,
    tabContentRef: React.RefObject<any>
) => void;

method render

render: () => any;

class TextInputBase

class TextInputBase extends Component<TextInputProps> {}

constructor

constructor(props: TextInputProps);

property defaultProps

static defaultProps: TextInputProps;

property displayName

static displayName: string;

property handleChange

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

property handleResize

handleResize: () => void;

property inputRef

inputRef: any;

property observer

observer: any;

property onBlur

onBlur: (event?: any) => void;

property onFocus

onFocus: (event?: any) => void;

property restoreText

restoreText: () => void;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => any;

class TimePicker

class TimePicker extends Component<TimePickerProps, TimePickerState> {}

constructor

constructor(props: TimePickerProps);

property defaultProps

static defaultProps: {
    className: string;
    isDisabled: boolean;
    time: string;
    is24Hour: boolean;
    invalidFormatErrorMessage: string;
    invalidMinMaxErrorMessage: string;
    placeholder: string;
    delimiter: string;
    'aria-label': string;
    width: string;
    menuAppendTo: string;
    stepMinutes: number;
    inputProps: {};
    minTime: string;
    maxTime: string;
    isOpen: boolean;
    setIsOpen: () => void;
    zIndex: number;
};

property displayName

static displayName: string;

property focusSelection

focusSelection: (index: number) => void;

property getIndexToScroll

getIndexToScroll: (index: number) => number;

property getOptions

getOptions: () => HTMLElement[];

property getRegExp

getRegExp: (includeSeconds?: boolean) => RegExp;

property handleGlobalKeys

handleGlobalKeys: (event: KeyboardEvent) => void;

property isValid

isValid: (time: string) => boolean;

property isValidFormat

isValidFormat: (time: string) => boolean;

property isValidTime

isValidTime: (time: string) => boolean;

property onDocClick

onDocClick: (event: MouseEvent | TouchEvent) => void;

property onInputChange

onInputChange: (
    event: React.FormEvent<HTMLInputElement>,
    newTime: string
) => void;

property onInputClick

onInputClick: (e: any) => void;

property onSelect

onSelect: (e: any) => void;

property onToggle

onToggle: (isOpen: boolean) => void;

property scrollToIndex

scrollToIndex: (index: number) => void;

property scrollToSelection

scrollToSelection: (time: string) => void;

property updateFocusedIndex

updateFocusedIndex: (increment: number) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: TimePickerProps,
    prevState: TimePickerState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => any;

class Toolbar extends Component<ToolbarProps, ToolbarState> {}

closeExpandableContent: (e: any) => void;

static displayName: string;

getNumberOfFilters: () => number;

hasNoPadding: boolean;

isToggleManaged: () => boolean;

labelGroupContentRef: any;

renderToolbar: (randomId: string, generatedOuiaId?: string) => any;

state: { isManagedToggleExpanded: boolean; filterInfo: {}; windowWidth: number };

staticFilterInfo: {};

toggleIsExpanded: () => void;

updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;

componentDidMount: () => void;

componentWillUnmount: () => void;

render: () => any;

class ToolbarContent

class ToolbarContent extends Component<ToolbarContentProps> {}

property defaultProps

static defaultProps: ToolbarContentProps;

property displayName

static displayName: string;

method render

render: () => any;

class ToolbarExpandableContent

class ToolbarExpandableContent extends Component<ToolbarExpandableContentProps> {}

property context

context: React.ContextType<any>;

property contextType

static contextType: any;

property defaultProps

static defaultProps: PickOptional<ToolbarExpandableContentProps>;

property displayName

static displayName: string;

method render

render: () => any;

class ToolbarFilter

class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {}

constructor

constructor(props: ToolbarFilterProps);

property context

context: React.ContextType<any>;

property contextType

static contextType: any;

property defaultProps

static defaultProps: PickOptional<ToolbarFilterProps>;

property displayName

static displayName: string;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method render

render: () => any;

class ToolbarToggleGroup

class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {}

property displayName

static displayName: string;

property expandableContentRef

expandableContentRef: any;

property isContentPopup

isContentPopup: () => boolean;

property toggleRef

toggleRef: any;

method render

render: () => any;

Interfaces

interface AboutModalProps

interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label'?: string;

Aria label for the about modal. This should be used when no productName prop is provided

property appendTo

appendTo?: HTMLElement | (() => HTMLElement);

The parent container to append the modal to. Defaults to document.body

property backgroundImageSrc

backgroundImageSrc?: string;

The URL or file path of the image for the background

property brandImageAlt

brandImageAlt: string;

The alternate text of the brand image

property brandImageSrc

brandImageSrc: string;

The URL of the image for the brand

property children

children: React.ReactNode;

Content rendered inside the about modal

property className

className?: string;

Additional classes added to the about modal

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Set aria label to the close button

property disableFocusTrap

disableFocusTrap?: boolean;

Flag to disable focus trap

property hasNoContentContainer

hasNoContentContainer?: boolean;

Prevents the about modal from rendering content inside a container; allows for more flexible layouts

property isOpen

isOpen?: boolean;

Flag to show the about modal

property onClose

onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;

A callback for when the close button is clicked

property productName

productName?: string;

Product name

property trademark

trademark?: string;

Trademark information

interface AccordionContentProps

interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label'?: string;

Adds accessible text to the Accordion content

property 'aria-labelledby'

'aria-labelledby'?: string;

Id of the controlling accordion toggle to label the content.

property children

children?: React.ReactNode;

Content rendered inside the Accordion

property className

className?: string;

Additional classes added to the Accordion content

property component

component?: React.ElementType;

Component to use as content container

property contentBodyProps

contentBodyProps?: AccordionExpandableContentBodyProps;

Props passed to the AccordionExpandableContentBody *

property id

id?: string;

Identify the AccordionContent item

property isCustomContent

isCustomContent?: React.ReactNode;

Flag indicating content is custom. Expanded content Body wrapper will be removed from children. This allows multiple bodies to be rendered as content.

property isFixed

isFixed?: boolean;

Flag to indicate Accordion content is fixed

interface AccordionExpandableContentBodyProps

interface AccordionExpandableContentBodyProps
    extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the accordion content body

interface AccordionItemProps

interface AccordionItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the accordion item.

property className

className?: string;

Additional classes added to the accordion item.

property isExpanded

isExpanded?: boolean;

Flag to indicate whether the accordion item is expanded.

interface AccordionProps

interface AccordionProps extends React.HTMLProps<HTMLDListElement> {}

property 'aria-label'

'aria-label'?: string;

Adds accessible text to the Accordion

property asDefinitionList

asDefinitionList?: boolean;

Flag to indicate whether use definition list or div

property children

children?: React.ReactNode;

Content rendered inside the Accordion

property className

className?: string;

Additional classes added to the Accordion

property displaySize

displaySize?: 'default' | 'lg';

Display size variant.

property headingLevel

headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

Heading level to use

property isBordered

isBordered?: boolean;

Flag to indicate the accordion had a border

property isNoPlainOnGlass

isNoPlainOnGlass?: boolean;

Flag to prevent the accordion from automatically applying plain styling when glass theme is enabled.
Modifiers
- @beta

property isPlain

isPlain?: boolean;

Flag to add plain styling to the accordion.
Modifiers
- @beta

property togglePosition

togglePosition?: 'start' | 'end';

Sets the toggle icon position for all accordion toggles.

interface AccordionToggleProps

interface AccordionToggleProps
    extends React.DetailedHTMLProps<
        React.ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside the Accordion toggle

property className

className?: string;

Additional classes added to the Accordion Toggle

property component

component?: React.ElementType;

Container to override the default for toggle

property id

id: string;

Identify the Accordion toggle number

interface ActionGroupProps

interface ActionGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Anything that can be rendered as ActionGroup content.

property className

className?: string;

Additional classes added to the ActionGroup.

interface ActionListGroupProps

interface ActionListGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Children of the action list group

property className

className?: string;

Additional classes added to the action list group

property isIconGroup

isIconGroup?: boolean;

Flag indicating the action list group contains multiple icons and item padding should be removed

interface ActionListItemProps

interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Children of the action list item

property className

className?: string;

Additional classes added to the action list item

interface ActionListProps

interface ActionListProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Children of the action list

property className

className?: string;

Additional classes added to the action list

property isIconList

isIconList?: boolean;

Flag indicating the action list contains multiple icons and item padding should be removed

property isVertical

isVertical?: boolean;

Whether the layout of children is vertical or horizontal.
Modifiers
- @beta

interface AlertActionCloseButtonProps

interface AlertActionCloseButtonProps extends ButtonProps {}

Renders a close button for a dismissable alert when this sub-component is passed into the alert's actionClose property.

property 'aria-label'

'aria-label'?: string;

Accessible label for the close button

property className

className?: string;

Additional classes added to the alert action close button.

property onClose

onClose?: () => void;

A callback for when the close button is clicked.

property variantLabel

variantLabel?: string;

Variant Label for the close button.

interface AlertActionLinkProps

interface AlertActionLinkProps extends ButtonProps {}

Renders buttons styled as links beneath the alert title and description when this sub-component is passed into the alert's actionLinks property.

property children

children?: React.ReactNode;

Content rendered inside the alert action link. Interactive content such as anchor elements should not be passed in.

property className

className?: string;

Additional classes added to the alert action link.

interface AlertGroupProps

interface AlertGroupProps
    extends Omit<React.HTMLProps<HTMLUListElement>, 'className'> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the alert group.

property appendTo

appendTo?: HTMLElement | (() => HTMLElement);

Determine where the alert is appended to

property children

children?: React.ReactNode;

Alerts to be rendered in the AlertGroup

property className

className?: string;

Additional classes added to the AlertGroup

property hasAnimations

hasAnimations?: boolean;

Flag to indicate whether Alerts are animated upon rendering and being dismissed. This is intended to remain false for testing purposes only.
Modifiers
- @beta

property isLiveRegion

isLiveRegion?: boolean;

Turns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology.

property isToast

isToast?: boolean;

Toast notifications are positioned at the top right corner of the viewport

property onOverflowClick

onOverflowClick?: () => void;

Function to call if user clicks on overflow message

property overflowMessage

overflowMessage?: string;

Custom text to show for the overflow message

interface AlertProps

interface AlertProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'>,
        OUIAProps {}

The main alert component.

property actionClose

actionClose?: React.ReactNode;

Close button; use the alert action close button component.

property actionLinks

actionLinks?: React.ReactNode;

Action links; use a single alert action link component or multiple wrapped in an array or React fragment.

property children

children?: React.ReactNode;

Content rendered inside the alert.

property className

className?: string;

Additional classes to add to the alert.

property component

component?: keyof React.JSX.IntrinsicElements;

Sets the element to use as the alert title. Default is h4.

property customIcon

customIcon?: React.ReactNode;

Set a custom icon to the alert. If not set the icon is set according to the variant.

property id

id?: string;

Uniquely identifies the alert.

property isExpandable

isExpandable?: boolean;

Flag indicating that the alert is expandable.

property isInline

isInline?: boolean;

Flag to indicate if the alert is inline.

property isLiveRegion

isLiveRegion?: boolean;

Flag to indicate if the alert is in a live region.

property isPlain

isPlain?: boolean;

Flag to indicate if the alert is plain.

property onTimeout

onTimeout?: () => void;

Function to be executed on alert timeout. Relevant when the timeout prop is set.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property timeout

timeout?: number | boolean;

If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds.

property timeoutAnimation

timeoutAnimation?: number;

If the user hovers over the alert and timeout expires, this is how long to wait before finally dismissing the alert.

property title

title: React.ReactNode;

Title of the alert.

property toggleAriaLabel

toggleAriaLabel?: string;

Adds accessible text to the alert toggle.

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the tooltip which is displayed if text is truncated.

property truncateTitle

truncateTitle?: number;

Truncate title to number of lines.

property variant

variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';

Adds alert variant styles.

property variantLabel

variantLabel?: string;

Variant label text for screen readers.

interface AnimationsConfig

interface AnimationsConfig {}

Configuration for animations throughout PatternFly components

property hasAnimations

hasAnimations?: boolean;

Whether animations are enabled globally

interface AnimationsProviderProps

interface AnimationsProviderProps {}

Props for the AnimationsProvider component

property children

children: ReactNode;

Child components that will have access to the animations context

property config

config: AnimationsConfig;

Animation configuration settings

interface AriaProps

interface AriaProps {}

property 'aria-describedby'

'aria-describedby'?: string;

property 'aria-label'

'aria-label'?: string;

property 'aria-labelledby'

'aria-labelledby'?: string;

property 'aria-valuemax'

'aria-valuemax'?: number;

property 'aria-valuemin'

'aria-valuemin'?: number;

property 'aria-valuenow'

'aria-valuenow'?: number;

property 'aria-valuetext'

'aria-valuetext'?: string;

interface AvatarProps

interface AvatarProps
    extends React.DetailedHTMLProps<
        React.ImgHTMLAttributes<HTMLImageElement>,
        HTMLImageElement
    > {}

property alt

alt: string;

Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar from assistive technologies when passing children or initials, pass an empty string to the alt prop.

property children

children?: React.ReactNode;

Content rendered inside the avatar, such as custom svgs or icons.

property className

className?: string;

Additional classes added to the avatar.

property color

color?:
    | 'red'
    | 'orangered'
    | 'orange'
    | 'yellow'
    | 'green'
    | 'teal'
    | 'blue'
    | 'purple'
    | 'gray';

Color of the avatar.

property initials

initials?: string;

Initials of the avatar.

property isBordered

isBordered?: boolean;

Flag to indicate the avatar should have a border.

property size

size?: 'sm' | 'md' | 'lg' | 'xl';

Size variant of avatar.

property src

src?: string;

Specifies the URL of the image for the avatar.

interface BackdropProps

interface BackdropProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the backdrop

property className

className?: string;

Additional classes added to the backdrop

interface BackgroundImageProps

interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Additional classes added to the background image.

property src

src: string;

The URL or file path of the image for the background

interface BadgeCountObject

interface BadgeCountObject {}

property className

className?: string;

Additional classes added to the badge count

property count

count?: number;

Adds count number right of button

property isRead

isRead?: boolean;

Adds styling to the badge to indicate it has been read

interface BadgeProps

interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {}

property children

children?: React.ReactNode;

content rendered inside the Badge

property className

className?: string;

additional classes added to the Badge

property isDisabled

isDisabled?: boolean;

Adds styling to the badge to indicate it is disabled

property isRead

isRead?: boolean;

Adds styling to the badge to indicate it has been read

property screenReaderText

screenReaderText?: string;

Text announced by screen readers to indicate the current content/status of the badge.

interface BannerProps

interface BannerProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the banner.

property className

className?: string;

Additional classes added to the banner.

property color

color?: BannerColor;

Color options for the banner, will be overwritten by any applied using the status prop.

property isPill

isPill?: boolean;

If set to true, the banner will have a pill shape

property isSticky

isSticky?: boolean;

If set to true, the banner sticks to the top of its container

property screenReaderText

screenReaderText?: string;

Text announced by screen readers to indicate the type of banner. This prop should only be passed in when the banner conveys status/severity.

property status

status?: BannerStatus;

Status style options for the banner, will overwrite any color applied using the color prop.

interface BrandProps

interface BrandProps
    extends React.DetailedHTMLProps<
        React.ImgHTMLAttributes<HTMLImageElement>,
        HTMLImageElement
    > {}

property alt

alt: string;

Attribute that specifies the alt text of a Brand. For a Brand this specifies the fallback alt text.

property children

children?: React.ReactNode;

Transforms the Brand into a element from an element. Container for child elements.

property className

className?: string;

Additional classes added to the either type of Brand.

property heights

heights?: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Heights at various breakpoints for a Brand.

property src

src?: string;

Attribute that specifies the URL of a Brand. For a Brand this specifies the fallback URL.

property widths

widths?: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Widths at various breakpoints for a Brand.

interface BreadcrumbHeadingProps

interface BreadcrumbHeadingProps extends React.HTMLProps<HTMLLIElement> {}

property children

children?: React.ReactNode;

Content rendered inside the breadcrumb title.

property className

className?: string;

Additional classes added to the breadcrumb item.

property component

component?: React.ReactNode;

Sets the base component to render. Defaults to

property showDivider

showDivider?: boolean;

Internal prop set by Breadcrumb on all but the first crumb

property target

target?: string;

Target for breadcrumb link.

property to

to?: string;

HREF for breadcrumb link.

interface BreadcrumbItemProps

interface BreadcrumbItemProps extends React.HTMLProps<HTMLLIElement> {}

property children

children?: React.ReactNode;

Content rendered inside the breadcrumb item.

property className

className?: string;

Additional classes added to the breadcrumb item.

property component

component?: React.ElementType;

Sets the base component to render. Defaults to

property isActive

isActive?: boolean;

Flag indicating whether the item is active.

property isDropdown

isDropdown?: boolean;

Flag indicating whether the item contains a dropdown.

property render

render?: (props: BreadcrumbItemRenderArgs) => React.ReactNode;

A render function to render the component inside the breadcrumb item.

property showDivider

showDivider?: boolean;

Internal prop set by Breadcrumb on all but the first crumb

property target

target?: string;

Target for breadcrumb link.

property to

to?: string;

HREF for breadcrumb link.

interface BreadcrumbItemRenderArgs

interface BreadcrumbItemRenderArgs {}

property ariaCurrent

ariaCurrent: 'page' | undefined;

property className

className: string;

interface BreadcrumbProps

interface BreadcrumbProps extends React.HTMLProps<HTMLElement>, OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Aria label added to the breadcrumb nav.

property children

children?: React.ReactNode;

Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.

property className

className?: string;

Additional classes added to the breadcrumb nav.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface BreakpointModifiers

interface BreakpointModifiers {}

property '2xl'

'2xl'?: string;

property default

default?: string;

property lg

lg?: string;

property md

md?: string;

property xl

xl?: string;

interface BullseyeProps

interface BullseyeProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Bullseye layout

property className

className?: string;

additional classes added to the Bullseye layout

property component

component?: keyof JSX.IntrinsicElements;

Sets the base component to render. defaults to div

interface ButtonProps

interface ButtonProps
    extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size'>,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Adds accessible text to the button.

property children

children?: React.ReactNode;

Content rendered inside the button

property className

className?: string;

Additional classes added to the button

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to button

property countOptions

countOptions?: BadgeCountObject;

Adds count number to button

property hamburgerVariant

hamburgerVariant?: 'expand' | 'collapse';

Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button.

property hasNoPadding

hasNoPadding?: boolean;

Applies no padding on a plain button variant. Use when plain button is placed inline with text

property icon

icon?: React.ReactNode | null;

Icon for the button.

property iconPosition

iconPosition?: 'start' | 'end' | 'left' | 'right';

Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property inoperableEvents

inoperableEvents?: string[];

Events to prevent when the button is in an aria-disabled state

property isAriaDisabled

isAriaDisabled?: boolean;

Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute

property isBlock

isBlock?: boolean;

Adds block styling to button

property isCircle

isCircle?: boolean;

Flag indicating the button is a circle button. Intended for buttons that only contain an icon..
Modifiers
- @beta

property isClicked

isClicked?: boolean;

Adds clicked styling to button.

property isDanger

isDanger?: boolean;

Adds danger styling to secondary or link button variants

property isDisabled

isDisabled?: boolean;

Adds disabled styling and disables the button using the disabled html attribute

property isDocked

isDocked?: boolean;

Flag indicating the button is a docked variant button. For use in docked navigation.
Modifiers
- @beta

property isExpanded

isExpanded?: boolean;

Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true.

property isFavorite

isFavorite?: boolean;

Adds favorite styling to a button

property isFavorited

isFavorited?: boolean;

Flag indicating whether the button is favorited or not, only when isFavorite is true.

property isHamburger

isHamburger?: boolean;

Flag indicating the button is a hamburger button. This will override the icon property.

property isInline

isInline?: boolean;

Adds inline styling to a link button

property isLoading

isLoading?: boolean;

Adds progress styling to button

property isSettings

isSettings?: boolean;

Flag indicating the button is a settings button. This will override the icon property.

property isTextExpanded

isTextExpanded?: boolean;

Flag indicating the docked button should display text. Only applies when isDocked is true.
Modifiers
- @beta

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property size

size?: 'default' | 'sm' | 'lg';

Adds styling which affects the size of the button

property spinnerAriaLabel

spinnerAriaLabel?: string;

Accessible label for the spinner to describe what is loading

property spinnerAriaLabelledBy

spinnerAriaLabelledBy?: string;

Id of element which describes what is being loaded

property spinnerAriaValueText

spinnerAriaValueText?: string;

Text describing that current loading status or progress

property state

state?: 'read' | 'unread' | 'attention';

Sets state of the stateful button variant. Default is "unread"

property tabIndex

tabIndex?: number;

Sets the button tabindex.

property type

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

Sets button type

property variant

variant?:
    | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'danger'
    | 'warning'
    | 'link'
    | 'plain'
    | 'control'
    | 'stateful';

Adds button variant styles

interface CalendarFormat

interface CalendarFormat {}

Additional properties that extend from and can be passed to the main component. These properties allow customizing the calendar formatting and aria-labels.

property cellAriaLabel

cellAriaLabel?: (date: Date) => string;

Accessible label for the date cells.

property dayFormat

dayFormat?: (date: Date) => React.ReactNode;

How to format days in buttons in table cells.

property inlineProps

inlineProps?: CalendarMonthInlineProps;

Props used to ensure accessibility when displaying the calendar month inline.

property locale

locale?: string;

If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation

property longWeekdayFormat

longWeekdayFormat?: (date: Date) => React.ReactNode;

How to format days in header for screen readers.

property monthFormat

monthFormat?: (date: Date) => React.ReactNode;

How to format months in month select.

property nextMonthAriaLabel

nextMonthAriaLabel?: string;

Accessible label for the next month button.

property prevMonthAriaLabel

prevMonthAriaLabel?: string;

Accessible label for the previous month button.

property rangeStart

rangeStart?: Date;

Which date to start range styles from.

property weekdayFormat

weekdayFormat?: (date: Date) => React.ReactNode;

How to format week days in header.

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;

Day of week that starts the week. 0 is Sunday, 6 is Saturday.

property yearInputAriaLabel

yearInputAriaLabel?: string;

Accessible label for the year input.

interface CalendarMonthInlineProps

interface CalendarMonthInlineProps {}

property ariaLabelledby

ariaLabelledby?: string;

Id of the accessible label of the calendar month. Recommended to map to the title.

property component

component?: keyof React.JSX.IntrinsicElements;

Component wrapping the calendar month when used inline. Recommended to be 'article'.

property title

title?: React.ReactNode;

Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component.

interface CalendarProps

interface CalendarProps
    extends CalendarFormat,
        Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {}

property className

className?: string;

Additional classes to add to the outer div of the calendar month.

property date

date?: Date;

Month/year to base other dates around.

property isDateFocused

isDateFocused?: boolean;

Flag to set browser focus on the passed date. *

property monthAppendTo

monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';

The container to append the month select menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: monthAppendTo={() => document.body}; monthAppendTo={document.getElementById('target')}

property onChange

onChange?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
    date: Date
) => void;

Callback when date is selected.

property onMonthChange

onMonthChange?: (
    event?:
        | React.MouseEvent
        | React.ChangeEvent
        | React.FormEvent<HTMLInputElement>,
    newDate?: Date
) => void;

Callback when month or year is changed.

property onSelectToggle

onSelectToggle?: (open: boolean) => void;

Internal prop to allow pressing escape in select menu to not close popover.

property validators

validators?: ((date: Date) => boolean)[];

Functions that returns if a date is valid and selectable.

interface CardBodyProps

interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the Card Body

property className

className?: string;

Additional classes added to the Card Body

property component

component?: keyof JSX.IntrinsicElements;

Sets the base component to render. defaults to div

property isFilled

isFilled?: boolean;

Enables the body Content to fill the height of the card

interface CardExpandableContentProps

interface CardExpandableContentProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the Card Body

property className

className?: string;

Additional classes added to the Card Body

interface CardFooterProps

interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the Card Footer

property className

className?: string;

Additional classes added to the Footer

property component

component?: keyof JSX.IntrinsicElements;

Sets the base component to render. defaults to div

interface CardHeaderActionsObject

interface CardHeaderActionsObject {}

property actions

actions: React.ReactNode;

Actions of the card header

property className

className?: string;

Additional classes added to the actions wrapper

property hasNoOffset

hasNoOffset?: boolean;

Flag indicating that the actions have no offset

interface CardHeaderProps

interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property actions

actions?: CardHeaderActionsObject;

Actions of the card header

property children

children?: React.ReactNode;

Content rendered inside the card header

property className

className?: string;

Additional classes added to the card header

property hasWrap

hasWrap?: boolean;

Flag indicating that header wrapping is enabled

property id

id?: string;

ID of the card header.

property isToggleRightAligned

isToggleRightAligned?: boolean;

Whether to right-align expandable toggle button

property onExpand

onExpand?: (event: React.MouseEvent, id: string) => void;

Callback expandable card

property selectableActions

selectableActions?: CardHeaderSelectableActionsObject;

Selectable actions of the card header

property toggleButtonProps

toggleButtonProps?: any;

Additional props for expandable toggle button

interface CardHeaderSelectableActionsObject

interface CardHeaderSelectableActionsObject {}

property className

className?: string;

Additional classes added to the selectable actions wrapper

property hasNoOffset

hasNoOffset?: boolean;

Flag indicating that the actions have no offset

property isChecked

isChecked?: boolean;

Deprecated
Flag indicating whether the selectable card input is checked. We recommend using the isSelected prop on the card component instead.

property isExternalLink

isExternalLink?: boolean;

Flag to indicate whether a clickable-only card's link should open in a new tab/window.

property isHidden

isHidden?: boolean;

Flag indicating the action is hidden

property name

name?: string;

Name for the input element of a selectable card.

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;

Callback for when a selectable card input changes

property onClickAction

onClickAction?: (event: React.MouseEvent) => void;

Action to call when a clickable-only card is clicked. This cannot be combined with the to prop.

property selectableActionAriaLabel

selectableActionAriaLabel?: string;

Adds an accessible name to the input of a selectable card or clickable button/anchor of a clickable-only card. This or selectableActionAriaLabelledby is required for clickable-only cards.

property selectableActionAriaLabelledby

selectableActionAriaLabelledby?: string;

A single or list of space-delimited ID's that provide an accessible name to the input of a selectable card or clickable button/anchor of a clickable-only card. This or selectableActionAriaLabelledby is required for clickable-only cards.

property selectableActionId

selectableActionId?: string;

Custom ID passed to the selectable card's input or a clickable-only card's button/anchor. If omitted, a random unique ID will be assigned to a selectable card's input.

property selectableActionProps

selectableActionProps?: any;

Additional props spread to a selectable card input or clickable-only card's button/anchor.

property to

to?: string;

Link to navigate to when a clickable-only card is clicked. This cannot be combined with the onClickAction prop.

property variant

variant?: 'single' | 'multiple';

Determines the type of input to be used for a selectable card.

interface CardProps

interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {}

property children

children?: React.ReactNode;

Content rendered inside the Card

property className

className?: string;

Additional classes added to the Card

property component

component?: keyof React.JSX.IntrinsicElements;

Sets the base component to render. defaults to div

property id

id?: string;

ID of the Card. Also passed back in the CardHeader onExpand callback.

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property isClickable

isClickable?: boolean;

Flag indicating that the card is clickable and contains some action that triggers on click.

property isClicked

isClicked?: boolean;

Flag indicating whether a card that is either only clickable or that is both clickable and selectable is currently clicked and has clicked styling.

property isCompact

isCompact?: boolean;

Modifies the card to include compact styling. Should not be used with isLarge.

property isDisabled

isDisabled?: boolean;

Flag indicating that a clickable or selectable card is disabled.

property isExpanded

isExpanded?: boolean;

Flag indicating if a card is expanded. Modifies the card to be expandable.

property isFullHeight

isFullHeight?: boolean;

Cause component to consume the available height of its container

property isGlass

isGlass?: boolean;

Modifies the card to include glass styling when glass theme is enabled

property isLarge

isLarge?: boolean;

Modifies the card to be large. Should not be used with isCompact.

property isPlain

isPlain?: boolean;

Modifies the card to include plain styling; this removes border and background

property isSelectable

isSelectable?: boolean;

Flag indicating that the card is selectable.

property isSelected

isSelected?: boolean;

Flag indicating whether a card that is either selectable only or both clickable and selectable is currently selected and has selected styling.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property variant

variant?: 'default' | 'secondary';

Card background color variant

interface CardTitleProps

interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the CardTitle

property className

className?: string;

Additional classes added to the CardTitle

property component

component?: keyof React.JSX.IntrinsicElements;

Sets the base component to render. defaults to div

property subtitle

subtitle?: React.ReactNode;

Subtitle of the card title
Modifiers
- @beta

interface CheckboxProps

interface CheckboxProps
    extends Omit<
            React.HTMLProps<HTMLInputElement>,
            'type' | 'onChange' | 'disabled' | 'label'
        >,
        OUIAProps {}

property 'aria-describedby'

'aria-describedby'?: string;

Custom aria-describedby value for the checkbox input. If not provided and description is set, a unique ID will be generated automatically.

property 'aria-label'

'aria-label'?: string;

Aria-label of the checkbox.

property body

body?: React.ReactNode;

Body text of the checkbox

property checked

checked?: boolean;

property className

className?: string;

Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop.

property component

component?: React.ElementType;

Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified.

property description

description?: React.ReactNode;

Description text of the checkbox.

property id

id: string;

Id of the checkbox.

property inputClassName

inputClassName?: string;

Additional classes added to the checkbox input.

property isChecked

isChecked?: boolean | null;

Flag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked).

property isDisabled

isDisabled?: boolean;

Flag to show if the checkbox is disabled.

property isLabelWrapped

isLabelWrapped?: boolean;

Flag to indicate whether the checkbox wrapper element is a element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified.

property isRequired

isRequired?: boolean;

Flag to show if the checkbox is required.

property isValid

isValid?: boolean;

Flag to show if the checkbox selection is valid or invalid.

property label

label?: React.ReactNode;

Label text of the checkbox.

property labelPosition

labelPosition?: 'start' | 'end';

Sets the position of the label. Defaults to 'end' (after the checkbox input).

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;

A callback for when the checkbox selection changes.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface ClipboardCopyActionProps

interface ClipboardCopyActionProps extends React.HTMLProps<HTMLLIElement> {}

property children

children?: React.ReactNode;

Content rendered inside the clipboard copy action.

property className

className?: string;

Additional classes added to the clipboard copy action.

interface ClipboardCopyButtonProps

interface ClipboardCopyButtonProps
    extends Omit<
        React.DetailedHTMLProps<
            React.ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement
        >,
        'ref'
    > {}

property 'aria-label'

'aria-label'?: string;

Aria-label for the copy button

property children

children: React.ReactNode;

Content of the copy button

property className

className?: string;

Additional classes added to the copy button

property entryDelay

entryDelay?: number;

Entry delay on the copy button tooltip

property exitDelay

exitDelay?: number;

Exit delay on the copy button tooltip

property hasNoPadding

hasNoPadding?: boolean;

Removes padding from clipboard copy button. This is used for inline-compact variant

property id

id: string;

ID of the copy button

property maxWidth

maxWidth?: string;

Max width of the copy button tooltip

property onClick

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

Callback for the copy when the button is clicked

property onTooltipHidden

onTooltipHidden?: () => void;

Callback when tooltip's hide transition has finished executing

property position

position?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the copy button tooltip

property textId

textId?: string;

Deprecated
ID of the content that is being copied

property variant

variant?: 'control' | 'plain';

Variant of the copy button

interface ClipboardCopyProps

interface ClipboardCopyProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'>,
        OUIAProps {}

property additionalActions

additionalActions?: React.ReactNode;

Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction.

property children

children: string | string[];

The text which is copied.

property className

className?: string;

Additional classes added to the clipboard copy container.

property clickTip

clickTip?: string;

Tooltip message to display when clicking the copy button

property copyAriaLabel

copyAriaLabel?: string;

Aria-label to use on the copy button

property entryDelay

entryDelay?: number;

Delay in ms before the tooltip appears.

property exitDelay

exitDelay?: number;

Delay in ms before the tooltip disappears.

property hoverTip

hoverTip?: string;

Tooltip message to display when hover the copy button

property inputId

inputId?: string;

ID to use on the TextInput.

property inputName

inputName?: string;

Name attribute to use on the TextInput.

property isBlock

isBlock?: boolean;

Flag to determine if inline clipboard copy should be block styling

property isCode

isCode?: boolean;

Flag to determine if clipboard copy content includes code

property isExpanded

isExpanded?: boolean;

Flag to determine if clipboard copy is in the expanded state initially

property isReadOnly

isReadOnly?: boolean;

Flag to show if the input is read only.

property maxWidth

maxWidth?: string;

Maximum width of the tooltip (default 150px).

property onChange

onChange?: (event: React.FormEvent, text?: string) => void;

A function that is triggered on changing the text.

property onCopy

onCopy?: (
    event: React.ClipboardEvent<HTMLDivElement>,
    text?: React.ReactNode
) => void;

A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely.

property onInputBlur

onInputBlur?: (event?: any) => void;

Callback function when text input is blurred (focus leaves)

property onInputFocus

onInputFocus?: (event?: any) => void;

Callback function when text input is focused

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property position

position?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Copy button tooltip position.

property textAriaLabel

textAriaLabel?: string;

Aria-label to use on the TextInput.

property toggleAriaLabel

toggleAriaLabel?: string;

Aria-label to use on the ClipboardCopyToggle.

property truncation

truncation?: boolean | Omit<TruncateProps, 'content'>;

Enables and customizes truncation for an inline-compact ClipboardCopy.

property variant

variant?:
    | typeof ClipboardCopyVariant
    | 'inline'
    | 'expansion'
    | 'inline-compact';

Adds Clipboard Copy variant styles.

interface ClipboardCopyState

interface ClipboardCopyState {}

property copied

copied: boolean;

property expanded

expanded: boolean;

property text

text: string;

property textWhenExpanded

textWhenExpanded: string;

interface CodeBlockActionProps

interface CodeBlockActionProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the code block action

property className

className?: string;

Additional classes passed to the code block action

interface CodeBlockCodeProps

interface CodeBlockCodeProps extends React.HTMLProps<HTMLPreElement> {}

property children

children?: React.ReactNode;

Code rendered inside the code block

property className

className?: string;

Additional classes passed to the code block pre wrapper

property codeClassName

codeClassName?: string;

Additional classes passed to the code block code

interface CodeBlockProps

interface CodeBlockProps extends React.HTMLProps<HTMLDivElement> {}

property actions

actions?: React.ReactNode;

Actions in the code block header. Should be wrapped with CodeBlockAction.

property children

children?: React.ReactNode;

Content rendered inside the code block

property className

className?: string;

Additional classes passed to the code block wrapper

interface CompassContentProps

interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {}

property children

children: React.ReactNode;

Content of the main Compass area. Typically one or more Panel components.

property className

className?: string;

Additional classes added to the CompassContent

property drawerContent

drawerContent?: React.ReactNode;

Content rendered in an optional drawer wrapping the CompassContent

property drawerProps

drawerProps?: DrawerProps;

Additional props passed to the drawer

interface CompassDockMainProps

interface CompassDockMainProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content of the compass dock main container.

property className

className?: string;

Additional classes added to the compass dock main container.

interface CompassHeaderProps

interface CompassHeaderProps {}

property logo

logo?: React.ReactNode;

Content of the logo area

property nav

nav?: React.ReactNode;

Content of the navigation area

property profile

profile?: React.ReactNode;

Content of the profile area

interface CompassHeroProps

interface CompassHeroProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {}

A wrapper component to pass a PatternFly Hero component into.

property children

children?: React.ReactNode;

Content of the hero

property className

className?: string;

Additional classes added to the hero

interface CompassMainHeaderContentProps

interface CompassMainHeaderContentProps extends React.HTMLProps<HTMLDivElement> {}

A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped in a Panel with PanelMain and PanelMainBody.

property children

children: React.ReactNode;

Content of the main header content.

property className

className?: string;

Additional classes added to the main header content.

interface CompassMainHeaderProps

interface CompassMainHeaderProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {}

The wrapper component for header content in the main Compass area. When building out a custom implementation, you should ensure any content within the main header is rendered inside a Panel, PanelMain, PanelMainBody stack and main header content wrappers.

property children

children?: React.ReactNode;

Custom main header content. To opt into a default styling, use the title and toolbar props instead.

property className

className?: string;

Additional classes added to the main header

property panelProps

panelProps?: Omit<PanelProps, 'children'>;

Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the children prop, you should pass your own Panel.

property title

title?: React.ReactNode;

Styled title. If title or toolbar is provided, the children will be ignored.

toolbar?: React.ReactNode;

Styled toolbar. If title or toolbar is provided, the children will be ignored.

interface CompassMainHeaderTitleProps

interface CompassMainHeaderTitleProps extends React.HTMLProps<HTMLDivElement> {}

A wrapper component for custom title content to be passed into a Compass main header. This should also be wrapped by a Compass main header content component.

property children

children: React.ReactNode;

Content of the main header title.

property className

className?: string;

Additional classes added to the main header title.

interface CompassMainHeaderToolbarProps

interface CompassMainHeaderToolbarProps extends React.HTMLProps<HTMLDivElement> {}

A wrapper component for custom toolbar content to be passed into a Compass main header. This should also be wrapped by a Compass main header content component.

property children

children: React.ReactNode;

Content of the main header toolbar.

property className

className?: string;

Additional classes added to the main header toolbar.

interface CompassMessageBarProps

interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content of the message bar. Typically a @patternfly/chatbot MessageBar component.

property className

className?: string;

Additional classes added to the message bar

interface CompassNavContentProps

interface CompassNavContentProps extends React.HTMLProps<HTMLDivElement> {}

property children

children: React.ReactNode;

Content of the nav content wrapper.

property className

className?: string;

Additional classes added to the nav content.

interface CompassNavHomeProps

interface CompassNavHomeProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the nav home.

property className

className?: string;

Additional classes added to the nav home wrapper.

property onClick

onClick?: React.MouseEventHandler<HTMLButtonElement>;

Click handler for the home button.

property tooltipContent

tooltipContent?: React.ReactNode;

Content to display in the tooltip. Defaults to "Home".

interface CompassNavMainProps

interface CompassNavMainProps extends React.HTMLProps<HTMLDivElement> {}

property children

children: React.ReactNode;

Content of the nav main section (typically tabs).

property className

className?: string;

Additional classes added to the nav main section.

interface CompassNavSearchProps

interface CompassNavSearchProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the nav search.

property className

className?: string;

Additional classes added to the nav search wrapper.

property onClick

onClick?: React.MouseEventHandler<HTMLButtonElement>;

Click handler for the search button.

property tooltipContent

tooltipContent?: React.ReactNode;

Content to display in the tooltip. Defaults to "Search".

interface CompassProps

interface CompassProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Additional classes added to the Compass.

property dock

dock?: React.ReactNode;

Content of the docked navigation area of the layout

property drawerContent

drawerContent?: React.ReactNode;

Content rendered in an optional drawer wrapping the layout

property drawerProps

drawerProps?: DrawerProps;

Additional props passed to the drawer

footer?: React.ReactNode;

Content placed at the bottom of the layout

header?: React.ReactNode;

Content placed at the top of the compass layout

property isDockExpanded

isDockExpanded?: boolean;

Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed.
Modifiers
- @beta

property isDockTextExpanded

isDockTextExpanded?: boolean;

Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and will handle toggling the visibility of the text in individual isDocked components.
Modifiers
- @beta

property isFooterExpanded

isFooterExpanded?: boolean;

Flag indicating if the footer is expanded

property isHeaderExpanded

isHeaderExpanded?: boolean;

Flag indicating if the header is expanded

property isSidebarEndExpanded

isSidebarEndExpanded?: boolean;

Flag indicating if the end sidebar is expanded

property isSidebarStartExpanded

isSidebarStartExpanded?: boolean;

Flag indicating if the start sidebar is expanded

property main

main?: React.ReactNode;

Content placed at the center of the layout

masthead?: React.ReactNode;

The horizontal masthead content (e.g. ). This masthead will only render when dock content is passed and only at mobile viewports.

property sidebarEnd

sidebarEnd?: React.ReactNode;

Content placed at the horizontal end of the layout, after the main content

property sidebarStart

sidebarStart?: React.ReactNode;

Content placed at the horizontal start of the layout, before the main content

interface ContentProps

interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {}

property children

children?: React.ReactNode;

Children rendered within the Content.

property className

className?: string;

Additional classes added to the Content.

property component

component?:
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'p'
    | 'a'
    | 'small'
    | 'blockquote'
    | 'pre'
    | 'hr'
    | 'ul'
    | 'ol'
    | 'dl'
    | 'li'
    | 'dt'
    | 'dd';

The content component. If none provided, it will be a 'div' and styling will be applied to all its child components.

property isEditorial

isEditorial?: boolean;

Flag to indicate the content has editorial styling. This styling increases the font size of body text and small text by one tier, increasing body text to large and small text to the previous body text size.

property isPlainList

isPlainList?: boolean;

Modifies the list (ul, ol and dl components) to have plain styling.

property isVisitedLink

isVisitedLink?: boolean;

Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface DataListActionProps

interface DataListActionProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'children'> {}

property 'aria-label'

'aria-label': string;

Adds accessible text to the data list action

property 'aria-labelledby'

'aria-labelledby': string;

Adds accessible text to the data list action

property children

children: React.ReactNode;

Content rendered as data list action (e.g or )

property className

className?: string;

Additional classes added to the data list action

property id

id: string;

Identify the data list toggle number

property visibility

visibility?: {
    default?: 'hidden' | 'visible';
    sm?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

What breakpoints to hide/show the data list action

interface DataListCellProps

interface DataListCellProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {}

property alignRight

alignRight?: boolean;

Aligns the cell content to the right of its parent.

property children

children?: React.ReactNode;

Content rendered inside the data list cell

property className

className?: string;

Additional classes added to the data list cell

property isFilled

isFilled?: boolean;

Enables the body content to fill the height of the card

property isIcon

isIcon?: boolean;

Set to true if the cell content is an icon

property width

width?: 1 | 2 | 3 | 4 | 5;

Width (from 1-5) to the data list cell

property wrapModifier

wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';

Determines which wrapping modifier to apply to the data list cell

interface DataListCheckProps

interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {}

property 'aria-labelledby'

'aria-labelledby': string;

Aria-labelledby of the DataList checkbox

property checked

checked?: boolean;

Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid, but only use one. To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both.

property className

className?: string;

Additional classes added to the DataList item checkbox

property defaultChecked

defaultChecked?: boolean;

Flag to set default value of DataList checkbox when it is uncontrolled by React state. To make the DataList checkbox controlled, instead use the isChecked prop, but do not use both.

property id

id?: string;

Id of the DataList checkbox.

property isChecked

isChecked?: boolean;

Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid, but only use one. To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both.

property isDisabled

isDisabled?: boolean;

Flag to show if the DataList checkbox is disabled

property isValid

isValid?: boolean;

Flag to show if the DataList checkbox selection is valid or invalid

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;

A callback for when the DataList checkbox selection changes

property otherControls

otherControls?: boolean;

Flag to indicate if other controls are used in the DataListItem

interface DataListContentProps

interface DataListContentProps extends React.HTMLProps<HTMLElement> {}

property 'aria-label'

'aria-label': string;

Adds accessible text to the DataList toggle

property children

children?: React.ReactNode;

Content rendered inside the DataList item

property className

className?: string;

Additional classes added to the DataList cell

property hasNoPadding

hasNoPadding?: boolean;

Flag to remove padding from the expandable content

property id

id?: string;

Identify the DataListContent item

property isHidden

isHidden?: boolean;

Flag to show if the expanded content of the DataList item is visible

property rowid

rowid?: string;

Id for the row

interface DataListControlProps

interface DataListControlProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Children of the data list control

property className

className?: string;

Additional classes added to the DataList item control

interface DataListDragButtonProps

interface DataListDragButtonProps extends React.HTMLProps<HTMLButtonElement> {}

property className

className?: string;

Additional classes added to the drag button

property isDisabled

isDisabled?: boolean;

Flag indicating if drag is disabled for the item

property type

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

Sets button type

interface DataListItemCellsProps

interface DataListItemCellsProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Additional classes added to the data list item content wrapper. Children should be one or more nodes

property dataListCells

dataListCells?: React.ReactNode;

Array of nodes that are rendered one after the other.

property rowid

rowid?: string;

Id for the row

interface DataListItemChildProps

interface DataListItemChildProps {}

property rowid

rowid: string;

Id for the row

interface DataListItemProps

interface DataListItemProps
    extends Omit<React.HTMLProps<HTMLLIElement>, 'children' | 'ref'> {}

property 'aria-labelledby'

'aria-labelledby': string;

Adds an accessible name to the selectable input if one is rendered

property children

children: React.ReactNode;

Content rendered inside the DataList item

property className

className?: string;

Additional classes added to the DataList item should be either or

property id

id?: string;

Unique id for the DataList item

property isExpanded

isExpanded?: boolean;

Flag to show if the expanded content of the DataList item is visible

property selectableInputAriaLabel

selectableInputAriaLabel?: string;

Aria label to apply to the selectable input if one is rendered

interface DataListItemRowProps

interface DataListItemRowProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'children'> {}

property children

children: React.ReactNode;

Content rendered inside the DataListItemRow

property className

className?: string;

Additional classes added to the DataListItemRow

property rowid

rowid?: string;

Id for the row item

property wrapModifier

wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';

Determines which wrapping modifier to apply to the DataListItemRow

interface DataListProps

interface DataListProps extends React.HTMLProps<HTMLUListElement> {}

property 'aria-label'

'aria-label': string;

Adds accessible text to the data list list

property children

children?: React.ReactNode;

Content rendered inside the data list list

property className

className?: string;

Additional classes added to the data list list

property gridBreakpoint

gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

Specifies the grid breakpoints

property innerRef

innerRef?: React.RefObject<HTMLUListElement | null>;

custom ref of the data list

property isCompact

isCompact?: boolean;

Flag indicating if data list should have compact styling

property isNoPlainOnGlass

isNoPlainOnGlass?: boolean;

Flag to prevent the data list from automatically applying plain styling when glass theme is enabled.
Modifiers
- @beta

property isPlain

isPlain?: boolean;

Flag indicating if data list should have plain styling with a transparent background
Modifiers
- @beta

property onSelectableRowChange

onSelectableRowChange?: (
    event: React.FormEvent<HTMLInputElement>,
    id: string
) => void;

Object that causes the data list to render hidden inputs which improve selectable item a11y

property onSelectDataListItem

onSelectDataListItem?: (
    event: React.MouseEvent | React.KeyboardEvent,
    id: string
) => void;

Optional callback to make data list selectable, fired when data list item selected

property selectedDataListItemId

selectedDataListItemId?: string;

Id of data list item currently selected

property wrapModifier

wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';

Determines which wrapping modifier to apply to the data list

interface DataListTextProps

interface DataListTextProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered within the data list text

property className

className?: string;

Additional classes added to the data list text

property component

component?: React.ReactNode;

Determines which element to render as a data list text. Usually div or span

property onMouseEnter

onMouseEnter?: (event: any) => void;

callback used to create the tooltip if text is truncated

property tooltip

tooltip?: string;

text to display on the tooltip

property wrapModifier

wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';

Determines which wrapping modifier to apply to the data list text

interface DataListToggleProps

interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-controls'

'aria-controls'?: string;

Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them.

property 'aria-label'

'aria-label'?: string;

Adds accessible text to the data list toggle

property 'aria-labelledby'

'aria-labelledby'?: string;

Adds accessible text to the data list toggle

property buttonProps

buttonProps?: ButtonProps;

Additional properties spread to the toggle button

property className

className?: string;

Additional classes added to the data list cell

property id

id: string;

Identify the data list toggle number

property isExpanded

isExpanded?: boolean;

Flag to show if the expanded content of the data list item is visible

property rowid

rowid?: string;

Id for the row

interface DatePickerProps

interface DatePickerProps
    extends CalendarFormat,
        Omit<
            React.HTMLProps<HTMLInputElement>,
            'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'
        > {}

The main date picker component.

property 'aria-label'

'aria-label'?: string;

Accessible label for the date picker.

property appendTo

appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';

The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo={() => document.body}; menuAppendTo={document.getElementById('target')}

property buttonAriaLabel

buttonAriaLabel?: string;

Accessible label for the button to open the date picker.

property className

className?: string;

Additional classes added to the date picker.

property dateFormat

dateFormat?: (date: Date) => string;

How to format the date in the text input.

property dateParse

dateParse?: (value: string) => Date;

How to parse the date in the text input.

property helperText

helperText?: React.ReactNode;

Helper text to display alongside the date picker. Expects a HelperText component.

property inputProps

inputProps?: TextInputProps;

Additional props for the text input.

property invalidFormatText

invalidFormatText?: string;

Error message to display when the text input contains a non-empty value in an invalid format.

property isDisabled

isDisabled?: boolean;

Flag indicating the date picker is disabled.

property onBlur

onBlur?: (event: any, value: string, date?: Date) => void;

Callback called every time the text input loses focus.

property onChange

onChange?: (
    event: React.FormEvent<HTMLInputElement>,
    value: string,
    date?: Date
) => void;

Callback called every time the text input value changes.

property placeholder

placeholder?: string;

String to display in the empty text input as a hint for the expected date format.

property popoverProps

popoverProps?: Partial<Omit<PopoverProps, 'appendTo'>>;

Props to pass to the popover that contains the calendar month component.

property requiredDateOptions

requiredDateOptions?: DatePickerRequiredObject;

Options to customize the requirement of a date

property validators

validators?: ((date: Date) => string)[];

Functions that returns an error message if a date is invalid.

property value

value?: string;

Value of the text input.

interface DatePickerRef

interface DatePickerRef {}

Allows finer control over the calendar's open state when a React ref is passed into the date picker component. Accessed via ref.current[property], e.g. ref.current.toggleCalendar().

property isCalendarOpen

isCalendarOpen: boolean;

Current calendar open status.

property setCalendarOpen

setCalendarOpen: (isOpen: boolean) => void;

Sets the calendar open status.

property toggleCalendar

toggleCalendar: (isOpen?: boolean) => void;

Toggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status. If the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter. If the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the correct control appropriately.

interface DatePickerRequiredObject

interface DatePickerRequiredObject {}

Props that customize the requirement of a date

property emptyDateText

emptyDateText?: string;

Error message to display when the text input is empty and the isRequired prop is also passed in.

property isRequired

isRequired?: boolean;

Flag indicating the date is required.

interface DescriptionListDescriptionProps

interface DescriptionListDescriptionProps extends React.HTMLProps<HTMLElement> {}

property children

children: React.ReactNode;

Anything that can be rendered inside of list description

property className

className?: string;

Additional classes added to the DescriptionListDescription

interface DescriptionListGroupProps

interface DescriptionListGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: any;

Any elements that can be rendered in the list group

property className

className?: string;

Additional classes added to the DescriptionListGroup

interface DescriptionListProps

interface DescriptionListProps
    extends Omit<React.HTMLProps<HTMLDListElement>, 'type'> {}

property autoFitMinModifier

autoFitMinModifier?: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Sets the minimum column size for the auto-fit (isAutoFit) layout at various breakpoints.

property children

children?: React.ReactNode;

Anything that can be rendered inside of the list

property className

className?: string;

Additional classes added to the list

property columnModifier

columnModifier?: {
    default?: '1Col' | '2Col' | '3Col';
    sm?: '1Col' | '2Col' | '3Col';
    md?: '1Col' | '2Col' | '3Col';
    lg?: '1Col' | '2Col' | '3Col';
    xl?: '1Col' | '2Col' | '3Col';
    '2xl'?: '1Col' | '2Col' | '3Col';
};

Sets the number of columns on the description list at various breakpoints

property displaySize

displaySize?: 'default' | 'lg' | '2xl';

Sets the display size of the descriptions in the description list.

property horizontalTermWidthModifier

horizontalTermWidthModifier?: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Sets the horizontal description list's term column width at various breakpoints.

property isAutoColumnWidths

isAutoColumnWidths?: boolean;

Sets the description list to format automatically.

property isAutoFit

isAutoFit?: boolean;

Sets the description list to auto fit.

property isCompact

isCompact?: boolean;

Sets the description list to compact styling.

property isFillColumns

isFillColumns?: boolean;

Sets the the default placement of description list groups to fill from top to bottom.

property isFluid

isFluid?: boolean;

Sets a horizontal description list to have fluid styling.

property isHorizontal

isHorizontal?: boolean;

Sets the description list component term and description pair to a horizontal layout.

property isInlineGrid

isInlineGrid?: boolean;

Modifies the description list display to inline-grid.

property orientation

orientation?: {
    sm?: 'vertical' | 'horizontal';
    md?: 'vertical' | 'horizontal';
    lg?: 'vertical' | 'horizontal';
    xl?: 'vertical' | 'horizontal';
    '2xl'?: 'vertical' | 'horizontal';
};

Indicates how the menu will align at various breakpoints.

property termWidth

termWidth?: string;

Sets the description list's term column width.

interface DescriptionListTermHelpTextButtonProps

interface DescriptionListTermHelpTextButtonProps
    extends React.HTMLProps<HTMLSpanElement> {}

property children

children: React.ReactNode;

Anything that can be rendered inside of list term

property className

className?: string;

Additional classes added to the DescriptionListTerm

interface DescriptionListTermHelpTextProps

interface DescriptionListTermHelpTextProps extends React.HTMLProps<HTMLElement> {}

property children

children: React.ReactNode;

Anything that can be rendered inside of list term

property className

className?: string;

Additional classes added to the DescriptionListTermHelpText

interface DescriptionListTermProps

interface DescriptionListTermProps extends React.HTMLProps<HTMLElement> {}

property children

children: React.ReactNode;

Anything that can be rendered inside of list term

property className

className?: string;

Additional classes added to the DescriptionListTerm

property icon

icon?: React.ReactNode;

Icon that is rendered inside of list term to the left side of the children

interface DividerProps

interface DividerProps extends React.HTMLProps<HTMLElement> {}

property className

className?: string;

Additional classes added to the divider

property component

component?: 'hr' | 'li' | 'div';

The component type to use

property inset

inset?: {
    default?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    sm?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    md?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    lg?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    xl?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    '2xl'?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
};

Insets at various breakpoints.

property orientation

orientation?: {
    default?: 'vertical' | 'horizontal';
    sm?: 'vertical' | 'horizontal';
    md?: 'vertical' | 'horizontal';
    lg?: 'vertical' | 'horizontal';
    xl?: 'vertical' | 'horizontal';
    '2xl'?: 'vertical' | 'horizontal';
};

Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout.

property role

role?: 'separator' | 'presentation';

The ARIA role of the divider when the component property has a value other than "hr".

interface DrawerActionsProps

interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Actions to be rendered in the panel head.

property className

className?: string;

Additional classes added to the drawer actions button.

interface DrawerCloseButtonProps

interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the drawer close button

property className

className?: string;

Additional classes added to the drawer close button outer .

property onClose

onClose?: () => void;

A callback for when the close button is clicked

interface DrawerContentBodyProps

interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content to be rendered in the drawer

property className

className?: string;

Additional classes added to the Drawer.

property hasPadding

hasPadding?: boolean;

Indicates if there should be padding around the drawer content body

interface DrawerContentProps

interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content to be rendered in the drawer.

property className

className?: string;

Additional classes added to the Drawer.

property colorVariant

colorVariant?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary';

Color variant of the background of the drawer panel

property panelContent

panelContent: React.ReactNode;

Content rendered in the drawer panel.

interface DrawerContextProps

interface DrawerContextProps {}

property drawerContentRef

drawerContentRef?: React.RefObject<HTMLDivElement | null>;

property drawerRef

drawerRef?: React.RefObject<HTMLDivElement | null>;

property isExpanded

isExpanded: boolean;

property isInline

isInline: boolean;

property isStatic

isStatic: boolean;

property onExpand

onExpand?: (
    event: KeyboardEvent | React.MouseEvent | React.TransitionEvent
) => void;

property position

position?: string;

interface DrawerHeadProps

interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content to be rendered in the drawer head

property className

className?: string;

Additional classes added to the drawer head.

interface DrawerPanelBodyProps

interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content to be rendered in the drawer

property className

className?: string;

Additional classes added to the Drawer.

property hasNoPadding

hasNoPadding?: boolean;

Indicates if there should be no padding around the drawer panel body

interface DrawerPanelContentProps

interface DrawerPanelContentProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onResize'> {}

property children

children?: React.ReactNode;

Content to be rendered in the drawer panel.

property className

className?: string;

Additional classes added to the drawer.

property colorVariant

colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';

Color variant of the background of the drawer panel. The no-backgroundis deprecated; use the isPlain prop instead.

property defaultSize

defaultSize?: string;

The starting size of a drawer.

property focusTrap

focusTrap?: DrawerPanelFocusTrapObject;

Adds and customizes a focus trap on the drawer panel content.

property hasNoBorder

hasNoBorder?: boolean;

Flag indicating that the drawer panel should not have a border.

property hasNoGlass

hasNoGlass?: boolean;

Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers.
Modifiers
- @beta

property id

id?: string;

ID of the drawer panel

property increment

increment?: number;

The increment amount for keyboard drawer resizing.

property isGlass

isGlass?: boolean;

Flag indicating that the drawer panel should use glass styles when in glass theme
Modifiers
- @beta

property isNoPlainOnGlass

isNoPlainOnGlass?: boolean;

Flag indicating that plain styles should be disabled when glass styles are used. This only applies when the drawer is static or inline.
Modifiers
- @beta

property isPlain

isPlain?: boolean;

Flag indicating that the drawer panel should use plain styles. This only applies when the drawer is static or inline.
Modifiers
- @beta

property isResizable

isResizable?: boolean;

Flag indicating that the drawer panel should be resizable.

property maxSize

maxSize?: string;

The maximum size of a drawer.

property minSize

minSize?: string;

The minimum size of a drawer.

property onResize

onResize?: (
    event: MouseEvent | TouchEvent | React.KeyboardEvent,
    width: number,
    id: string
) => void;

Callback for resize end.

property resizeAriaLabel

resizeAriaLabel?: string;

Aria label for the resizable drawer splitter.

property widths

widths?: {
    default?:
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    lg?:
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    xl?:
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    '2xl'?:
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
};

Width for drawer panel at various breakpoints. Overridden by resizable drawer minSize and defaultSize.

interface DrawerPanelDescriptionProps

interface DrawerPanelDescriptionProps extends React.HTMLProps<HTMLDivElement> {}

Provides a description within the drawer panel. This should typically follow the drawer head.

property children

children: React.ReactNode;

Content to be rendered in the drawer description

property className

className?: string;

Additional classes added to the drawer description.

interface DrawerPanelFocusTrapObject

interface DrawerPanelFocusTrapObject {}

property 'aria-labelledby'

'aria-labelledby'?: string;

One or more id's to use for the drawer panel content's accessible label.

property elementToFocusOnExpand

elementToFocusOnExpand?: HTMLElement | SVGElement | string;

The element to focus when the drawer panel content expands. By default the first focusable element will receive focus. If there are no focusable elements, the panel itself will receive focus.

property enabled

enabled?: boolean;

Enables a focus trap on the drawer panel content. This will also automatically handle focus management when the panel expands and when it collapses. Do not pass this prop if the isStatic prop on the drawer component is true.

interface DrawerProps

interface DrawerProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered in the drawer panel

property className

className?: string;

Additional classes added to the Drawer.

property isExpanded

isExpanded?: boolean;

Indicates if the drawer is expanded

property isInline

isInline?: boolean;

Indicates if the content element and panel element are displayed side by side.

property isPill

isPill?: boolean;

Indicates if the drawer will have pill styles
Modifiers
- @beta

property isStatic

isStatic?: boolean;

Indicates if the drawer will always show both content and panel.

property onExpand

onExpand?: (
    event: KeyboardEvent | React.MouseEvent | React.TransitionEvent
) => void;

Callback when drawer panel is expanded after waiting 250ms for animation to complete.

property position

position?: 'start' | 'end' | 'bottom' | 'left' | 'right';

Position of the drawer panel. left and right are deprecated, use start and end instead.

interface DrawerSectionProps

interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content to be rendered in the drawer section.

property className

className?: string;

Additional classes added to the drawer section.

property colorVariant

colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';

Color variant of the background of the drawer section. The no-background value is deprecated; use the isPlain prop instead.

property isPlain

isPlain?: boolean;

Flag indicating that the drawer section should use plain styles.
Modifiers
- @beta

interface DrilldownMenuProps

interface DrilldownMenuProps
    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'> {}

property children

children?: React.ReactNode;

Items within drilldown sub-menu

property getHeight

getHeight?: (height: string) => void;

Optional callback to get the height of the sub menu

property id

id?: string;

ID of the drilldown sub-menu

property isMenuDrilledIn

isMenuDrilledIn?: boolean;

Flag indicating whether the menu is drilled in

interface DropdownGroupProps

interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {}

See the MenuGroup section of the Menu documentation for additional props that may be passed.

property children

children: React.ReactNode;

Anything which can be rendered in a dropdown group.

property className

className?: string;

Classes applied to root element of dropdown group

property label

label?: React.ReactNode;

Label of the dropdown group

interface DropdownItemProps

interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {}

See the MenuItem section of the Menu documentation for additional props that may be passed.

property children

children?: React.ReactNode;

Anything which can be rendered in a dropdown item

property className

className?: string;

Classes applied to root element of dropdown item

property description

description?: React.ReactNode;

Description of the dropdown item

property innerRef

innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;

Forwarded ref

property isAriaDisabled

isAriaDisabled?: boolean;

Render item as aria-disabled option

property isDisabled

isDisabled?: boolean;

Render item as disabled option

property onClick

onClick?: (event?: any) => void;

Callback for item click

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property tooltipProps

tooltipProps?: TooltipProps;

Props for adding a tooltip to a menu item

property value

value?: any;

Identifies the component in the dropdown onSelect callback

interface DropdownListProps

interface DropdownListProps extends MenuListProps {}

property children

children: React.ReactNode;

Anything which can be rendered in a dropdown list

property className

className?: string;

Classes applied to root element of dropdown list

interface DropdownProps

interface DropdownProps extends MenuProps, OUIAProps {}

See the Menu documentation for additional props that may be passed.

property children

children?: React.ReactNode;

Anything which can be rendered in a dropdown.

property className

className?: string;

Classes applied to root element of dropdown.

property containerComponent

containerComponent?: React.ReactNode;

Sets the base component to render for the container. Defaults to

property containerOuiaId

containerOuiaId?: number | string;

When applied, wraps dropdown in a container with a data-ouia-component-id.

property containerOuiaSafe

containerOuiaSafe?: boolean;

Set the value of data-ouia-safe for the container when containerOuiaId is applied. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property focusTimeoutDelay

focusTimeoutDelay?: number;

Time in ms to wait before firing the toggles' focus event. Defaults to 0

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property isOpen

isOpen?: boolean;

Flag to indicate if menu is opened.

property isPlain

isPlain?: boolean;

Indicates if the menu should be without the outer box-shadow.

property isScrollable

isScrollable?: boolean;

Indicates if the menu should be scrollable.

property maxMenuHeight

maxMenuHeight?: string;

Maximum height of dropdown menu

property menuHeight

menuHeight?: string;

Height of the dropdown menu

property onOpenChange

onOpenChange?: (isOpen: boolean) => void;

Callback to allow the dropdown component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys.

property onOpenChangeKeys

onOpenChangeKeys?: string[];

Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.

property onSelect

onSelect?: (
    event?: React.MouseEvent<Element, MouseEvent>,
    value?: DropdownItemProps['value']
) => void;

Function callback called when user selects item.

property onToggleKeydown

onToggleKeydown?: (event: KeyboardEvent) => void;

Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property popperProps

popperProps?: PopperOptions;

Additional properties to pass to the Popper

property shouldFocusFirstItemOnOpen

shouldFocusFirstItemOnOpen?: boolean;

Flag indicating the first menu item should be focused after opening the dropdown.
Modifiers
- @beta

property shouldFocusToggleOnSelect

shouldFocusToggleOnSelect?: boolean;

Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus.

property shouldPreventScrollOnItemFocus

shouldPreventScrollOnItemFocus?: boolean;

Flag indicating if scroll on focus of the first menu item should occur.

property toggle

toggle:
    | DropdownToggleProps
    | ((toggleRef: React.RefObject<any>) => React.ReactNode);

Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.

property zIndex

zIndex?: number;

z-index of the dropdown menu

interface DropdownToggleProps

interface DropdownToggleProps {}

property toggleNode

toggleNode: React.ReactNode;

Dropdown toggle node.

property toggleRef

toggleRef?: React.RefObject<HTMLButtonElement | null>;

Reference to the toggle.

interface DualListSelectorControlProps

interface DualListSelectorControlProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {}

Renders an individual control button for moving selected options between each dual list selector pane.

property 'aria-label'

'aria-label'?: string;

Accessible label for the dual list selector control.

property children

children?: React.ReactNode;

Content to be rendered in the dual list selector control.

property className

className?: string;

Additional classes applied to the dual list selector control.

property icon

icon?: React.ReactNode;

Icon to be rendered in the dual list selector control.

property innerRef

innerRef?: React.Ref<any>;

forwarded ref

property isDisabled

isDisabled?: boolean;

Flag indicating the control is disabled.

property onClick

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

Callback fired when dual list selector control is selected.

property tooltipContent

tooltipContent?: React.ReactNode;

Content to be displayed in a tooltip on hover of control.

property tooltipProps

tooltipProps?: any;

Additional tooltip properties passed to the tooltip.

interface DualListSelectorControlsWrapperProps

interface DualListSelectorControlsWrapperProps
    extends React.HTMLProps<HTMLDivElement> {}

Acts as the container for the DualListSelectorControl sub-components.

property 'aria-label'

'aria-label'?: string;

Accessible label for the dual list selector controls wrapper.

property children

children?: React.ReactNode;

Content to be rendered inside of the controls wrapper.

property className

className?: string;

Additional classes added to the wrapper.

property innerRef

innerRef?: React.RefObject<HTMLDivElement | null>;

Forwarded ref

interface DualListSelectorListItemProps

interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {}

Creates an individual option that can be selected and moved between the dual list selector panes. This is contained within the DualListSelectorList sub-component.

property children

children?: React.ReactNode;

Content rendered inside the dual list selector.

property className

className?: string;

Additional classes applied to the dual list selector.

property draggableButtonAriaLabel

draggableButtonAriaLabel?: string;

Accessible label for the draggable button on draggable list items.

property id

id?: string;

ID of the option.

property innerRef

innerRef?: React.RefObject<HTMLLIElement | null>;

Forwarded ref

property isDisabled

isDisabled?: boolean;

Flag indicating if the dual list selector is in a disabled state.

property isDraggable

isDraggable?: boolean;

Flag indicating this item is draggable for reordering.

property isSelected

isSelected?: boolean;

Flag indicating the list item is currently selected.

property onOptionSelect

onOptionSelect?: (
    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
    id?: string
) => void;

Callback fired when an option is selected.

property orderIndex

orderIndex?: number;

Internal field used to keep track of order of unfiltered options.

interface DualListSelectorListProps

interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {}

Acts as the container for DualListSelectorListItem sub-components.

property children

children?: React.ReactNode;

Content rendered inside the dual list selector list.

property innerRef

innerRef?: React.RefObject<HTMLUListElement | null>;

forwarded ref

interface DualListSelectorPaneProps

interface DualListSelectorPaneProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {}

Acts as the container for a list of options that are either available or chosen, depending on the pane type (available or chosen). A search input and other actions, such as sorting, can also be passed into this sub-component.

property actions

actions?: React.ReactNode[];

Actions to place above the pane.

property children

children?: React.ReactNode;

A dual list selector list or dual list selector tree to be rendered in the pane.

property className

className?: string;

Additional classes applied to the dual list selector pane.

property id

id?: string;

ID of the pane.

property isChosen

isChosen?: boolean;

Flag indicating if this pane is the chosen pane.

property isDisabled

isDisabled?: boolean;

Flag indicating whether the component is disabled.

property listMinHeight

listMinHeight?: string;

Minimum height of the list of options rendered in the pane. *

property onSearch

onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;

Callback for search input. To be used when isSearchable is true.

property searchInput

searchInput?: React.ReactNode;

A search input placed above the list at the top of the pane, before actions.

property status

status?: string;

Status to display above the pane.

property title

title?: React.ReactNode;

Title of the pane.

interface DualListSelectorProps

interface DualListSelectorProps {}

Acts as a container for all other DualListSelector sub-components when using a composable dual list selector.

property children

children?: React.ReactNode;

Content to be rendered in the dual list selector.

property className

className?: string;

Additional classes applied to the dual list selector.

property hasAnimations

hasAnimations?: boolean;

Flag indicating whether a tree dual list selector has animations. This will always render nested dual list selector items rather than dynamically rendering them. This prop will be removed in the next breaking change release in favor of defaulting to always-rendered items.

property id

id?: string;

ID of the dual list selector.

property isTree

isTree?: boolean;

Flag indicating if the dual list selector uses trees instead of simple lists.

interface DualListSelectorTreeItemData

interface DualListSelectorTreeItemData {}

property badgeProps

badgeProps?: any;

Additional properties to pass to the option badge.

property checkProps

checkProps?: any;

Additional properties to pass to the option checkbox.

property children

children?: DualListSelectorTreeItemData[];

Content rendered inside the dual list selector.

property className

className?: string;

Additional classes applied to the dual list selector.

property defaultExpanded

defaultExpanded?: boolean;

Flag indicating this option is expanded by default.

property hasBadge

hasBadge?: boolean;

Flag indicating this option has a badge.

property id

id: string;

ID of the option.

property isChecked

isChecked: boolean;

Checked state of the option.

property isDisabled

isDisabled?: boolean;

Flag indicating whether the component is disabled.

property onOptionCheck

onOptionCheck?: (
    event:
        | React.MouseEvent
        | React.ChangeEvent<HTMLInputElement>
        | React.KeyboardEvent,
    isChecked: boolean,
    isChosen: boolean,
    itemData: DualListSelectorTreeItemData
) => void;

Callback fired when an option is checked.

property parentId

parentId?: string;

Parent ID of an option.

property text

text: string;

Text of the option.

interface DualListSelectorTreeProps

interface DualListSelectorTreeProps
    extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {}

Used in place of the DualListSelectorListItem sub-component when building a composable dual list selector with a tree.

property data

data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);

Data of the tree view.

property defaultAllExpanded

defaultAllExpanded?: boolean;

Sets the default expanded behavior.

property hasBadges

hasBadges?: boolean;

Flag indicating if all options should have badges.

property id

id?: string;

ID of the tree view.

property isDisabled

isDisabled?: boolean;

Flag indicating if the dual list selector tree is in the disabled state.

property isNested

isNested?: boolean;

Flag indicating if the list is nested.

property onOptionCheck

onOptionCheck?: (
    event:
        | React.MouseEvent
        | React.ChangeEvent<HTMLInputElement>
        | React.KeyboardEvent,
    isChecked: boolean,
    itemData: DualListSelectorTreeItemData
) => void;

Callback fired when an option is checked.

interface EmptyStateActionsProps

interface EmptyStateActionsProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the empty state actions

property className

className?: string;

Additional classes added to the empty state actions

interface EmptyStateBodyProps

interface EmptyStateBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the empty state body

property className

className?: string;

Additional classes added to the empty state body

interface EmptyStateFooterProps

interface EmptyStateFooterProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the empty state footer

property className

className?: string;

Additional classes added to the empty state footer

interface EmptyStateProps

interface EmptyStateProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the empty state

property className

className?: string;

Additional classes added to the empty state

property headerClassName

headerClassName?: string;

Additional class names to apply to the empty state header

property headingLevel

headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

The heading level to use, default is h1

property icon

icon?: React.ComponentType<any>;

Empty state icon element to be rendered. Can also be a spinner component

property isFullHeight

isFullHeight?: boolean;

Cause component to consume the available height of its container

property status

status?: 'danger' | 'warning' | 'success' | 'info' | 'custom';

Status of the empty state, will set a default status icon and color. Icon can be overwritten using the icon prop

property titleClassName

titleClassName?: string;

Additional classes added to the title inside empty state header

property titleText

titleText?: React.ReactNode;

Text of the title inside empty state header, will be wrapped in headingLevel

property variant

variant?: 'xs' | 'sm' | 'lg' | 'xl' | 'full';

Modifies empty state max-width and sizes of icon, title and body

interface ExpandableSectionProps

interface ExpandableSectionProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {}

The main expandable section component.

property children

children?: React.ReactNode;

Content rendered inside the expandable section.

property className

className?: string;

Additional classes added to the expandable section.

property contentId

contentId?: string;

Id of the content of the expandable section. When passing in the isDetached property, this property's value should match the contentId property of the expandable section toggle sub-component.

property direction

direction?: 'up' | 'down';

Sets the direction of the expandable animation when isDetached is true. If this prop is not passed, animation will not occur.

property displaySize

displaySize?: 'default' | 'lg';

Display size variant. Set to "lg" for disclosure styling.

property hasToggleIcon

hasToggleIcon?: boolean;

Whether to show a toggle icon when variant is not truncated. If omitted, it is important to ensure the current state of the ExpandableSection is conveyed, most likely by having dynamic toggle text.

property isDetached

isDetached?: boolean;

Flag indicating that the expandable section and expandable toggle are detached from one another.

property isExpanded

isExpanded?: boolean;

Flag to indicate if the content is expanded.

property isIndented

isIndented?: boolean;

Flag to indicate if the content is indented.

property isWidthLimited

isWidthLimited?: boolean;

Flag to indicate the width of the component is limited. Set to "true" for disclosure styling.

property onToggle

onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;

Callback function to toggle the expandable section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component.

property toggleAriaLabel

toggleAriaLabel?: string;

Accessible name via human readable string for the expandable section toggle.

property toggleAriaLabelledBy

toggleAriaLabelledBy?: string;

Accessible name via space delimtted list of IDs for the expandable section toggle.

property toggleContent

toggleContent?: React.ReactNode | ((isExpanded: boolean) => React.ReactNode);

React node that appears in the attached toggle in place of the toggleText property. Can also be a function that receives the expanded state and returns a React node.

property toggleIcon

toggleIcon?: React.ReactNode;

Icon shown in toggle when variant is not truncated.

property toggleId

toggleId?: string;

Id of the toggle of the expandable section, which provides an accessible name to the expandable section content via the aria-labelledby attribute. When the isDetached property is also passed in, the value of this property must match the toggleId property of the expandable section toggle sub-component.

property toggleText

toggleText?: string;

Text that appears in the attached toggle.

property toggleTextCollapsed

toggleTextCollapsed?: string;

Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text).

property toggleTextExpanded

toggleTextExpanded?: string;

Text that appears in the attached toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text).

property toggleWrapper

toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level. When using heading elements, the button will be rendered inside the heading for proper semantics. This is useful when the toggle text should function as a heading in the document structure.

property truncateMaxLines

truncateMaxLines?: number;

Truncates the expandable content to the specified number of lines when using the "truncate" variant.

property variant

variant?: 'default' | 'truncate';

Determines the variant of the expandable section. When passing in "truncate" as the variant, the expandable content will be truncated after 3 lines by default.

interface ExpandableSectionToggleProps

interface ExpandableSectionToggleProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {}

Acts as the toggle sub-component when the main expandable section component has the isDetached property passed in. Allows for more custom control over the expandable section's toggle.

property children

children?: React.ReactNode;

Content rendered inside the expandable toggle.

property className

className?: string;

Additional classes added to the expandable toggle.

property contentId

contentId?: string;

Id of the toggle's respective expandable section content. The value passed into this property should match the contentId property of the main expandable section component.

property direction

direction?: 'up' | 'down';

Direction the toggle arrow should point when the expandable section is expanded.

property hasTruncatedContent

hasTruncatedContent?: boolean;

Flag to determine toggle styling when the expandable content is truncated.

property isDetached

isDetached?: boolean;

Flag indicating that the expandable section and expandable toggle are detached from one another.

property isExpanded

isExpanded?: boolean;

Flag indicating if the expandable section is expanded.

property onToggle

onToggle?: (isExpanded: boolean) => void;

Callback function to toggle the expandable content.

property toggleAriaLabel

toggleAriaLabel?: string;

Accessible name via human readable string for the expandable section toggle.

property toggleAriaLabelledBy

toggleAriaLabelledBy?: string;

Accessible name via space delimtted list of IDs for the expandable section toggle.

property toggleId

toggleId?: string;

Id of the toggle. The value passed into this property should match the aria-labelledby property of the main expandable section component.

property toggleWrapper

toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level. When using heading elements, the button will be rendered inside the heading for proper semantics. This is useful when the toggle text should function as a heading in the document structure.

interface FileUploadFieldProps

interface FileUploadFieldProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'value'> {}

A more customizable file upload component for implementing custom logic. Drag and drop functionality is not built in by default.

property 'aria-label'

'aria-label'?: string;

Aria-label for the text area.

property allowEditingUploadedText

allowEditingUploadedText?: boolean;

Flag to allow editing of a text file's contents after it is selected from disk.

property browseButtonAriaDescribedby

browseButtonAriaDescribedby?: string;

ID or ID's of elements that describe the browse button. Typically this should refer to elements such as helper text when there are file restrictions.

property browseButtonText

browseButtonText?: string;

Text for the browse button.

property children

children?: React.ReactNode;

Additional children to render after (or instead of) the file preview.

property className

className?: string;

Additional classes added to the file upload field container element.

property clearButtonText

clearButtonText?: string;

Text for the clear button.

property containerRef

containerRef?: React.Ref<HTMLDivElement>;

A reference object to attach to the file upload field container element.

property filename

filename?: string;

Value to be shown in the read-only filename field.

property filenameAriaLabel

filenameAriaLabel?: string;

Aria-label for the read-only filename field.

property filenamePlaceholder

filenamePlaceholder?: string;

Placeholder string to display in the empty filename field.

property hideDefaultPreview

hideDefaultPreview?: boolean;

Flag to hide the built-in preview of the file (where available). If true, you can use the children property to render an alternate preview.

property id

id: string;

Unique id for the text area. Also used to generate ids for accessible labels.

property isBrowseButtonDisabled

isBrowseButtonDisabled?: boolean;

Flag to disable the browse button.

property isClearButtonDisabled

isClearButtonDisabled?: boolean;

Flag to disable the clear button.

property isDisabled

isDisabled?: boolean;

Flag to show if the field is disabled.

property isDragActive

isDragActive?: boolean;

Flag to show if a file is being dragged over the file upload field.

property isLoading

isLoading?: boolean;

Flag to show if a file is being loaded.

property isReadOnly

isReadOnly?: boolean;

Flag to show if the field is read only.

property isRequired

isRequired?: boolean;

Flag to show if the field is required.

property name

name?: string;

Name property for the text input.

property onBrowseButtonClick

onBrowseButtonClick?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;

A callback for when the browse button is clicked.

property onClearButtonClick

onClearButtonClick?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;

A callback for when the clear button is clicked.

property onTextAreaBlur

onTextAreaBlur?: (event?: any) => void;

Callback for when focus is lost on the text area field.

property onTextAreaClick

onTextAreaClick?: (
    event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>
) => void;

A callback for when the text area is clicked. Can also be set via the onClick property of the file upload component.

property onTextChange

onTextChange?: (
    event: React.ChangeEvent<HTMLTextAreaElement>,
    text: string
) => void;

Text area text changed.

property spinnerAriaValueText

spinnerAriaValueText?: string;

Aria-valuetext for the loading spinner.

property textAreaPlaceholder

textAreaPlaceholder?: string;

Placeholder string to display in the empty text area field.

property type

type?: 'text' | 'dataURL';

What type of file. Determines what is is expected by the value property (a string for 'text' and 'dataURL', or a File object otherwise).

property validated

validated?: 'success' | 'error' | 'default';

Value to indicate if the field is modified to show that validation state. If set to success, field will be modified to indicate valid state. If set to error, field will be modified to indicate error state.

property value

value?: string | File;

Value of the file's contents (string if text file, File object otherwise).

interface FileUploadHelperTextProps

interface FileUploadHelperTextProps extends React.HTMLProps<HTMLDivElement> {}

A container for helper text content. This sub-component should be passed as a child to the main file upload or file upload field component.

property children

children: React.ReactNode;

Content to render inside the file upload helper text container. Typically this will be the helper text component.

property className

className?: string;

Additional classes added to the file upload helper text container element.

interface FileUploadProps

interface FileUploadProps
    extends Omit<
        FileUploadFieldProps,
        | 'children'
        | 'onBrowseButtonClick'
        | 'onClearButtonClick'
        | 'isDragActive'
        | 'containerRef'
    > {}

property 'aria-label'

'aria-label'?: string;

Aria-label for the text area.

property allowEditingUploadedText

allowEditingUploadedText?: boolean;

Flag to allow editing of a text file's contents after it is selected from disk.

property browseButtonAriaDescribedby

browseButtonAriaDescribedby?: string;

ID or ID's of elements that describe the browse button. Typically this should refer to elements such as helper text when there are file restrictions.

property browseButtonText

browseButtonText?: string;

Text for the browse button.

property children

children?: React.ReactNode;

Additional children to render after (or instead of) the file preview.

property className

className?: string;

Additional classes added to the file upload container element.

property clearButtonText

clearButtonText?: string;

Text for the clear button.

property dropzoneProps

dropzoneProps?: Partial<DropzoneOptions>;

Optional extra props to customize react-dropzone.

property filename

filename?: string;

Value to be shown in the read-only filename field.

property filenameAriaLabel

filenameAriaLabel?: string;

Aria-label for the read-only filename field.

property filenamePlaceholder

filenamePlaceholder?: string;

Placeholder string to display in the empty filename field.

property hideDefaultPreview

hideDefaultPreview?: boolean;

Flag to hide the built-in preview of the file (where available). If true, you can use the children property to render an alternate preview.

property id

id: string;

Unique id for the text area. Also used to generate ids for accessible labels.

property isDisabled

isDisabled?: boolean;

Flag to show if the field is disabled.

property isLoading

isLoading?: boolean;

Flag to show if a file is being loaded.

property isReadOnly

isReadOnly?: boolean;

Flag to show if the field is read only.

property isRequired

isRequired?: boolean;

Flag to show if the field is required.

property onClearClick

onClearClick?: React.MouseEventHandler<HTMLButtonElement>;

Clear button was clicked.

property onClick

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

Callback for clicking on the file upload field text area. By default, prevents a click in the text area from opening file dialog.

property onDataChange

onDataChange?: (event: DropEvent, data: string) => void;

On data changed - if type='text' or type='dataURL' and file was loaded it will call this method

property onFileInputChange

onFileInputChange?: (event: DropEvent, file: File) => void;

Change event emitted from the hidden <input type="file" > field associated with the component

property onReadFailed

onReadFailed?: (event: DropEvent, error: DOMException, fileHandle: File) => void;

A callback for when the FileReader API fails.

property onReadFinished

onReadFinished?: (event: DropEvent, fileHandle: File) => void;

A callback for when a selected file finishes loading.

property onReadStarted

onReadStarted?: (event: DropEvent, fileHandle: File) => void;

A callback for when a selected file starts loading.

property onTextChange

onTextChange?: (
    event: React.ChangeEvent<HTMLTextAreaElement>,
    text: string
) => void;

Text area text changed.

property spinnerAriaValueText

spinnerAriaValueText?: string;

Aria-valuetext for the loading spinner.

property type

type?: 'text' | 'dataURL';

What type of file. Determines whether 'onDataChange` is called and what is expected by the value property (a string for 'text' and 'dataURL', or a File object otherwise.

property validated

validated?: 'success' | 'error' | 'default';

Value to indicate if the field is modified to show that validation state. If set to success, field will be modified to indicate valid state. If set to error, field will be modified to indicate error state.

property value

value?: string | File;

Value of the file's contents (string if text file, File object otherwise).

interface FlexItemProps

interface FlexItemProps extends React.HTMLProps<HTMLDivElement> {}

property align

align?: {
    default?: 'alignLeft' | 'alignRight';
    sm?: 'alignLeft' | 'alignRight';
    md?: 'alignLeft' | 'alignRight';
    lg?: 'alignLeft' | 'alignRight';
    xl?: 'alignLeft' | 'alignRight';
    '2xl'?: 'alignLeft' | 'alignRight';
};

Value to use for margin: auto at various breakpoints

property alignSelf

alignSelf?: {
    default?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    sm?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    md?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    lg?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    xl?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    '2xl'?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
};

Value to add for align-self property at various breakpoints

property children

children?: React.ReactNode;

content rendered inside the Flex layout

property className

className?: string;

additional classes added to the Flex layout

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to div

property flex

flex?: {
    default?:
        | 'flexDefault'
        | 'flexNone'
        | 'flex_1'
        | 'flex_2'
        | 'flex_3'
        | 'flex_4';
    sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    '2xl'?:
        | 'flexDefault'
        | 'flexNone'
        | 'flex_1'
        | 'flex_2'
        | 'flex_3'
        | 'flex_4';
};

Value to add for flex property at various breakpoints

property fullWidth

fullWidth?: {
    default?: 'fullWidth';
    sm?: 'fullWidth';
    md?: 'fullWidth';
    lg?: 'fullWidth';
    xl?: 'fullWidth';
    '2xl'?: 'fullWidth';
};

Whether to set width: 100% at various breakpoints

property grow

grow?: {
    default?: 'grow';
    sm?: 'grow';
    md?: 'grow';
    lg?: 'grow';
    xl?: 'grow';
    '2xl'?: 'grow';
};

Whether to add flex: grow at various breakpoints

property order

order?: {
    default?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Modifies the flex layout element order property

property shrink

shrink?: {
    default?: 'shrink';
    sm?: 'shrink';
    md?: 'shrink';
    lg?: 'shrink';
    xl?: 'shrink';
    '2xl'?: 'shrink';
};

Whether to add flex: shrink at various breakpoints

property spacer

spacer?: {
    default?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    sm?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    md?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    lg?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    xl?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    '2xl'?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
};

Spacers at various breakpoints

interface FlexProps

interface FlexProps extends React.HTMLProps<HTMLDivElement> {}

property align

align?: {
    default?: 'alignLeft' | 'alignRight';
    sm?: 'alignLeft' | 'alignRight';
    md?: 'alignLeft' | 'alignRight';
    lg?: 'alignLeft' | 'alignRight';
    xl?: 'alignLeft' | 'alignRight';
    '2xl'?: 'alignLeft' | 'alignRight';
};

Value to use for margin: auto at various breakpoints

property alignContent

alignContent?: {
    default?:
        | 'alignContentFlexStart'
        | 'alignContentFlexEnd'
        | 'alignContentCenter'
        | 'alignContentStretch'
        | 'alignContentSpaceBetween'
        | 'alignContentSpaceAround';
    sm?:
        | 'alignContentFlexStart'
        | 'alignContentFlexEnd'
        | 'alignContentCenter'
        | 'alignContentStretch'
        | 'alignContentSpaceBetween'
        | 'alignContentSpaceAround';
    md?:
        | 'alignContentFlexStart'
        | 'alignContentFlexEnd'
        | 'alignContentCenter'
        | 'alignContentStretch'
        | 'alignContentSpaceBetween'
        | 'alignContentSpaceAround';
    lg?:
        | 'alignContentFlexStart'
        | 'alignContentFlexEnd'
        | 'alignContentCenter'
        | 'alignContentStretch'
        | 'alignContentSpaceBetween'
        | 'alignContentSpaceAround';
    xl?:
        | 'alignContentFlexStart'
        | 'alignContentFlexEnd'
        | 'alignContentCenter'
        | 'alignContentStretch'
        | 'alignContentSpaceBetween'
        | 'alignContentSpaceAround';
    '2xl'?:
        | 'alignContentFlexStart'
        | 'alignContentFlexEnd'
        | 'alignContentCenter'
        | 'alignContentStretch'
        | 'alignContentSpaceBetween'
        | 'alignContentSpaceAround';
};

Value to add for align-content property at various breakpoints

property alignItems

alignItems?: {
    default?:
        | 'alignItemsFlexStart'
        | 'alignItemsFlexEnd'
        | 'alignItemsCenter'
        | 'alignItemsStretch'
        | 'alignItemsBaseline';
    sm?:
        | 'alignItemsFlexStart'
        | 'alignItemsFlexEnd'
        | 'alignItemsCenter'
        | 'alignItemsStretch'
        | 'alignItemsBaseline';
    md?:
        | 'alignItemsFlexStart'
        | 'alignItemsFlexEnd'
        | 'alignItemsCenter'
        | 'alignItemsStretch'
        | 'alignItemsBaseline';
    lg?:
        | 'alignItemsFlexStart'
        | 'alignItemsFlexEnd'
        | 'alignItemsCenter'
        | 'alignItemsStretch'
        | 'alignItemsBaseline';
    xl?:
        | 'alignItemsFlexStart'
        | 'alignItemsFlexEnd'
        | 'alignItemsCenter'
        | 'alignItemsStretch'
        | 'alignItemsBaseline';
    '2xl'?:
        | 'alignItemsFlexStart'
        | 'alignItemsFlexEnd'
        | 'alignItemsCenter'
        | 'alignItemsStretch'
        | 'alignItemsBaseline';
};

Value to add for align-items property at various breakpoints

property alignSelf

alignSelf?: {
    default?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    sm?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    md?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    lg?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    xl?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
    '2xl'?:
        | 'alignSelfFlexStart'
        | 'alignSelfFlexEnd'
        | 'alignSelfCenter'
        | 'alignSelfStretch'
        | 'alignSelfBaseline';
};

Value to add for align-self property at various breakpoints

property children

children?: React.ReactNode;

content rendered inside the Flex layout

property className

className?: string;

additional classes added to the Flex layout

property columnGap

columnGap?: {
    default?:
        | 'columnGap'
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap2xl'
        | 'columnGap3xl'
        | 'columnGap4xl';
    sm?:
        | 'columnGap'
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap2xl'
        | 'columnGap3xl'
        | 'columnGap4xl';
    md?:
        | 'columnGap'
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap2xl'
        | 'columnGap3xl'
        | 'columnGap4xl';
    lg?:
        | 'columnGap'
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap2xl'
        | 'columnGap3xl'
        | 'columnGap4xl';
    xl?:
        | 'columnGap'
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap2xl'
        | 'columnGap3xl'
        | 'columnGap4xl';
    '2xl'?:
        | 'columnGap'
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap2xl'
        | 'columnGap3xl'
        | 'columnGap4xl';
};

Gap beween columns at various breakpoints. This will override spacers for the main axis.

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to div

property direction

direction?: {
    default?: 'column' | 'columnReverse' | 'row' | 'rowReverse';
    sm?: 'column' | 'columnReverse' | 'row' | 'rowReverse';
    md?: 'column' | 'columnReverse' | 'row' | 'rowReverse';
    lg?: 'column' | 'columnReverse' | 'row' | 'rowReverse';
    xl?: 'column' | 'columnReverse' | 'row' | 'rowReverse';
    '2xl'?: 'column' | 'columnReverse' | 'row' | 'rowReverse';
};

Value to add for flex-direction property at various breakpoints

property display

display?: {
    default?: 'inlineFlex';
    sm?: 'flex' | 'inlineFlex';
    md?: 'flex' | 'inlineFlex';
    lg?: 'flex' | 'inlineFlex';
    xl?: 'flex' | 'inlineFlex';
    '2xl'?: 'flex' | 'inlineFlex';
};

Value to set to display property at various breakpoints

property flex

flex?: {
    default?:
        | 'flexDefault'
        | 'flexNone'
        | 'flex_1'
        | 'flex_2'
        | 'flex_3'
        | 'flex_4';
    sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
    '2xl'?:
        | 'flexDefault'
        | 'flexNone'
        | 'flex_1'
        | 'flex_2'
        | 'flex_3'
        | 'flex_4';
};

Value to add for flex property at various breakpoints

property flexWrap

flexWrap?: {
    default?: 'wrap' | 'wrapReverse' | 'nowrap';
    sm?: 'wrap' | 'wrapReverse' | 'nowrap';
    md?: 'wrap' | 'wrapReverse' | 'nowrap';
    lg?: 'wrap' | 'wrapReverse' | 'nowrap';
    xl?: 'wrap' | 'wrapReverse' | 'nowrap';
    '2xl'?: 'wrap' | 'wrapReverse' | 'nowrap';
};

Value to set for flex-wrap property at various breakpoints

property fullWidth

fullWidth?: {
    default?: 'fullWidth';
    sm?: 'fullWidth';
    md?: 'fullWidth';
    lg?: 'fullWidth';
    xl?: 'fullWidth';
    '2xl'?: 'fullWidth';
};

Whether to set width: 100% at various breakpoints

property gap

gap?: {
    default?:
        | 'gap'
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap2xl'
        | 'gap3xl'
        | 'gap4xl';
    sm?:
        | 'gap'
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap2xl'
        | 'gap3xl'
        | 'gap4xl';
    md?:
        | 'gap'
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap2xl'
        | 'gap3xl'
        | 'gap4xl';
    lg?:
        | 'gap'
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap2xl'
        | 'gap3xl'
        | 'gap4xl';
    xl?:
        | 'gap'
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap2xl'
        | 'gap3xl'
        | 'gap4xl';
    '2xl'?:
        | 'gap'
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap2xl'
        | 'gap3xl'
        | 'gap4xl';
};

Gap between items at various breakpoints. This will override spacers for the main axis.

property grow

grow?: {
    default?: 'grow';
    sm?: 'grow';
    md?: 'grow';
    lg?: 'grow';
    xl?: 'grow';
    '2xl'?: 'grow';
};

Whether to add flex: grow at various breakpoints

property justifyContent

justifyContent?: {
    default?:
        | 'justifyContentFlexStart'
        | 'justifyContentFlexEnd'
        | 'justifyContentCenter'
        | 'justifyContentSpaceBetween'
        | 'justifyContentSpaceAround'
        | 'justifyContentSpaceEvenly';
    sm?:
        | 'justifyContentFlexStart'
        | 'justifyContentFlexEnd'
        | 'justifyContentCenter'
        | 'justifyContentSpaceBetween'
        | 'justifyContentSpaceAround'
        | 'justifyContentSpaceEvenly';
    md?:
        | 'justifyContentFlexStart'
        | 'justifyContentFlexEnd'
        | 'justifyContentCenter'
        | 'justifyContentSpaceBetween'
        | 'justifyContentSpaceAround'
        | 'justifyContentSpaceEvenly';
    lg?:
        | 'justifyContentFlexStart'
        | 'justifyContentFlexEnd'
        | 'justifyContentCenter'
        | 'justifyContentSpaceBetween'
        | 'justifyContentSpaceAround'
        | 'justifyContentSpaceEvenly';
    xl?:
        | 'justifyContentFlexStart'
        | 'justifyContentFlexEnd'
        | 'justifyContentCenter'
        | 'justifyContentSpaceBetween'
        | 'justifyContentSpaceAround'
        | 'justifyContentSpaceEvenly';
    '2xl'?:
        | 'justifyContentFlexStart'
        | 'justifyContentFlexEnd'
        | 'justifyContentCenter'
        | 'justifyContentSpaceBetween'
        | 'justifyContentSpaceAround'
        | 'justifyContentSpaceEvenly';
};

Value to add for justify-content property at various breakpoints

property order

order?: {
    default?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Modifies the flex layout element order property

property rowGap

rowGap?: {
    default?:
        | 'rowGap'
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap2xl'
        | 'rowGap3xl'
        | 'rowGap4xl';
    sm?:
        | 'rowGap'
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap2xl'
        | 'rowGap3xl'
        | 'rowGap4xl';
    md?:
        | 'rowGap'
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap2xl'
        | 'rowGap3xl'
        | 'rowGap4xl';
    lg?:
        | 'rowGap'
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap2xl'
        | 'rowGap3xl'
        | 'rowGap4xl';
    xl?:
        | 'rowGap'
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap2xl'
        | 'rowGap3xl'
        | 'rowGap4xl';
    '2xl'?:
        | 'rowGap'
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap2xl'
        | 'rowGap3xl'
        | 'rowGap4xl';
};

Gap between rows at various breakpoints. This will override spacers for the main axis.

property shrink

shrink?: {
    default?: 'shrink';
    sm?: 'shrink';
    md?: 'shrink';
    lg?: 'shrink';
    xl?: 'shrink';
    '2xl'?: 'shrink';
};

Whether to add flex: shrink at various breakpoints

property spaceItems

spaceItems?: {
    default?:
        | 'spaceItemsNone'
        | 'spaceItemsXs'
        | 'spaceItemsSm'
        | 'spaceItemsMd'
        | 'spaceItemsLg'
        | 'spaceItemsXl'
        | 'spaceItems2xl'
        | 'spaceItems3xl'
        | 'spaceItems4xl';
    sm?:
        | 'spaceItemsNone'
        | 'spaceItemsXs'
        | 'spaceItemsSm'
        | 'spaceItemsMd'
        | 'spaceItemsLg'
        | 'spaceItemsXl'
        | 'spaceItems2xl'
        | 'spaceItems3xl'
        | 'spaceItems4xl';
    md?:
        | 'spaceItemsNone'
        | 'spaceItemsXs'
        | 'spaceItemsSm'
        | 'spaceItemsMd'
        | 'spaceItemsLg'
        | 'spaceItemsXl'
        | 'spaceItems2xl'
        | 'spaceItems3xl'
        | 'spaceItems4xl';
    lg?:
        | 'spaceItemsNone'
        | 'spaceItemsXs'
        | 'spaceItemsSm'
        | 'spaceItemsMd'
        | 'spaceItemsLg'
        | 'spaceItemsXl'
        | 'spaceItems2xl'
        | 'spaceItems3xl'
        | 'spaceItems4xl';
    xl?:
        | 'spaceItemsNone'
        | 'spaceItemsXs'
        | 'spaceItemsSm'
        | 'spaceItemsMd'
        | 'spaceItemsLg'
        | 'spaceItemsXl'
        | 'spaceItems2xl'
        | 'spaceItems3xl'
        | 'spaceItems4xl';
    '2xl'?:
        | 'spaceItemsNone'
        | 'spaceItemsXs'
        | 'spaceItemsSm'
        | 'spaceItemsMd'
        | 'spaceItemsLg'
        | 'spaceItemsXl'
        | 'spaceItems2xl'
        | 'spaceItems3xl'
        | 'spaceItems4xl';
};

Space items at various breakpoints

property spacer

spacer?: {
    default?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    sm?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    md?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    lg?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    xl?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
    '2xl'?:
        | 'spacerNone'
        | 'spacerXs'
        | 'spacerSm'
        | 'spacerMd'
        | 'spacerLg'
        | 'spacerXl'
        | 'spacer2xl'
        | 'spacer3xl'
        | 'spacer4xl';
};

Spacers at various breakpoints

interface FocusTrapProps

interface FocusTrapProps extends ComponentPropsWithRef<'div'> {}

property active

active?: boolean;

property focusTrapOptions

focusTrapOptions?: FocusTrapOptions;

property id

id?: string;

Unique id that can optionally be applied to focus trap

property paused

paused?: boolean;

property preventScrollOnDeactivate

preventScrollOnDeactivate?: boolean;

Prevent from scrolling to the previously focused element on deactivation

interface FormAlertProps

interface FormAlertProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

An inline PatternFly Alert.

property className

className?: string;

Additional classes added to the FormGroup.

interface FormContextProps

interface FormContextProps {}

property errors

errors: Record<string, string>;

Record of errors for all fieldIds

property isValid

isValid: boolean;

Flag to determine the overall validity. True if the record of errors is empty.

property setErrors

setErrors: Dispatch<SetStateAction<Record<string, string>>>;

Set multiple errors within the managed record of errors

property setValues

setValues: Dispatch<SetStateAction<Record<string, string>>>;

Set multiple values within the managed record of values

property touched

touched: Record<string, boolean>;

Record of touched state for all fieldIds

property values

values: Record<string, string>;

Record of values for all fieldIds

method getError

getError: (fieldId: string) => string;

Get the error message for a given fieldId

method getValue

getValue: (fieldId: string) => string;

Get the value for a given fieldId

method isTouched

isTouched: (fieldId: string) => boolean;

Used to determine touched state for a given fieldId

method setError

setError: (fieldId: string, error: string | undefined) => void;

Set the error message for a given fieldId

method setTouched

setTouched: (fieldId: string, isTouched: boolean) => void;

Used to update the touched state for a given fieldId

method setValidator

setValidator: (
    fieldId: string,
    validate: (value: string) => string | null
) => void;

Set a validator for a specific fieldId

method setValue

setValue: (fieldId: string, value: string) => void;

Set the value for a given fieldId

method validate

validate: () => Record<string, string | null>;

Triggers all fieldId-specific validators

interface FormContextProviderProps

interface FormContextProviderProps {}

property children

children?: React.ReactNode | ((props: FormContextProps) => React.ReactNode);

Any react node. Can optionally use render function to return context props.

property initialValues

initialValues?: Record<string, string>;

Record of initial values

interface FormFieldGroupExpandableProps

interface FormFieldGroupExpandableProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {}

property children

children?: React.ReactNode;

Anything that can be rendered as form field group content.

property className

className?: string;

Additional classes added to the form field group.

property hasAnimations

hasAnimations?: boolean;

Flag indicating whether an expandable form field group has animations. This will always render nested field group content rather than dynamically rendering them. This prop will be removed in the next breaking change release in favor of defaulting to always-rendered items.

header?: React.ReactNode;

Form field group header

property isExpanded

isExpanded?: boolean;

Flag indicating if the form field group is initially expanded

property toggleAriaLabel

toggleAriaLabel?: string;

Aria-label to use on the form field group toggle button

interface FormFieldGroupHeaderProps

interface FormFieldGroupHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property actions

actions?: React.ReactNode;

Field group header actions

property className

className?: string;

Additional classes added to the section

property titleDescription

titleDescription?: React.ReactNode;

Field group header title description

property titleText

titleText?: FormFieldGroupHeaderTitleTextObject;

Field group header title text

interface FormFieldGroupHeaderTitleTextObject

interface FormFieldGroupHeaderTitleTextObject {}

property id

id: string;

The id applied to the title div for accessibility

property text

text: React.ReactNode;

Title text.

interface FormFieldGroupProps

interface FormFieldGroupProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {}

property children

children?: React.ReactNode;

Anything that can be rendered as form field group content.

property className

className?: string;

Additional classes added to the form field group.

header?: React.ReactNode;

Form field group header

interface FormGroupLabelHelpProps

interface FormGroupLabelHelpProps extends ButtonProps {}

A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked to our Popover component.

property 'aria-label'

'aria-label': string;

Adds an accessible name for the help button.

property className

className?: string;

Additional classes added to the help button.

property innerRef

innerRef?: React.Ref<HTMLSpanElement>;

Forwarded ref

interface FormGroupProps

interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {}

property children

children?: React.ReactNode;

Anything that can be rendered as FormGroup content.

property className

className?: string;

Additional classes added to the FormGroup.

property fieldId

fieldId?: string;

ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in. If only one field is included, its ID attribute and this prop must be the same.

property hasNoPaddingTop

hasNoPaddingTop?: boolean;

Removes top spacer from label.

property isInline

isInline?: boolean;

Sets the FormGroup isInline.

property isRequired

isRequired?: boolean;

Sets the FormGroup required.

property isStack

isStack?: boolean;

Sets the FormGroupControl to be stacked

property label

label?: React.ReactNode;

Label text before the field.

property labelHelp

labelHelp?: React.ReactElement<any>;

A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component.

property labelInfo

labelInfo?: React.ReactNode;

Additional label information displayed after the label.

property role

role?: string;

Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple radio inputs, or pass in "group" when the form group contains multiple of any other input type.

interface FormHelperTextProps

interface FormHelperTextProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the helper text wrapper

property className

className?: string;

Additional classes added to the helper text wrapper

interface FormProps

interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {}

property children

children?: React.ReactNode;

Anything that can be rendered as Form content.

property className

className?: string;

Additional classes added to the Form.

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property isHorizontal

isHorizontal?: boolean;

Sets the Form to horizontal.

property isWidthLimited

isWidthLimited?: boolean;

Limits the max-width of the form.

property maxWidth

maxWidth?: string;

Sets a custom max-width for the form.

interface FormSectionProps

interface FormSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {}

property children

children?: React.ReactNode;

Content rendered inside the section

property className

className?: string;

Additional classes added to the section

property title

title?: React.ReactNode;

Title for the section

property titleElement

titleElement?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

Element to wrap the section title

interface FormSelectOptionGroupProps

interface FormSelectOptionGroupProps
    extends Omit<React.HTMLProps<HTMLOptGroupElement>, 'disabled'> {}

property children

children?: React.ReactNode;

content rendered inside the Select Option Group

property className

className?: string;

additional classes added to the Select Option

property isDisabled

isDisabled?: boolean;

flag indicating if the Option Group is disabled

property label

label: string;

the label for the option

interface FormSelectOptionProps

interface FormSelectOptionProps
    extends Omit<React.HTMLProps<HTMLOptionElement>, 'disabled'> {}

property className

className?: string;

additional classes added to the Select Option

property isDisabled

isDisabled?: boolean;

flag indicating if the option is disabled

property isPlaceholder

isPlaceholder?: boolean;

flag indicating if option will have placeholder styling applied when selected *

property label

label: string;

the label for the option

property value

value?: any;

the value for the option

interface FormSelectProps

interface FormSelectProps
    extends Omit<
            React.HTMLProps<HTMLSelectElement>,
            'onChange' | 'onBlur' | 'onFocus' | 'disabled'
        >,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Custom flag to show that the FormSelect requires an associated id or aria-label.

property children

children: React.ReactNode;

content rendered inside the FormSelect

property className

className?: string;

additional classes added to the FormSelect control

property isDisabled

isDisabled?: boolean;

Flag indicating the FormSelect is disabled

property isRequired

isRequired?: boolean;

Sets the FormSelect required.

property onBlur

onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;

Optional callback for updating when selection loses focus

property onChange

onChange?: (event: React.FormEvent<HTMLSelectElement>, value: string) => void;

Optional callback for updating when selection changes

property onFocus

onFocus?: (event: React.FormEvent<HTMLSelectElement>) => void;

Optional callback for updating when selection gets focus

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property validated

validated?: 'success' | 'warning' | 'error' | 'default';

Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state.

property value

value?: any;

value of selected option

interface GalleryItemProps

interface GalleryItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Gallery Item

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to div

interface GalleryProps

interface GalleryProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Gallery layout

property className

className?: string;

additional classes added to the Gallery layout

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to div

property hasGutter

hasGutter?: boolean;

Adds space between children.

property maxWidths

maxWidths?: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Maximum widths at various breakpoints.

property minWidths

minWidths?: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Minimum widths at various breakpoints.

interface GenerateIdProps

interface GenerateIdProps {}

property isRandom

isRandom?: boolean;

Deprecated
Has no effect. Kept for backward compatibility.

property prefix

prefix?: string;

String to prefix the id with

method children

children: (id: string) => React.ReactNode;

Component to be rendered with the generated id

interface GridItemProps

interface GridItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Grid Layout Item

property className

className?: string;

additional classes added to the Grid Layout Item

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to div

property lg

lg?: gridSpans;

the number of columns the grid item spans on large device. Value should be a number 1-12

property lgOffset

lgOffset?: gridSpans;

the number of columns the grid item is offset on large device. Value should be a number 1-12

property lgRowSpan

lgRowSpan?: gridSpans;

the number of rows the grid item spans on large device. Value should be a number 1-12

property md

md?: gridSpans;

the number of columns the grid item spans on medium device. Value should be a number 1-12

property mdOffset

mdOffset?: gridSpans;

the number of columns the grid item is offset on medium device. Value should be a number 1-12

property mdRowSpan

mdRowSpan?: gridSpans;

the number of rows the grid item spans on medium device. Value should be a number 1-12

property offset

offset?: gridSpans;

the number of columns a grid item is offset

property order

order?: {
    default?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Modifies the flex layout element order property

property rowSpan

rowSpan?: gridSpans;

the number of rows the grid item spans. Value should be a number 1-12

property sm

sm?: gridSpans;

the number of columns the grid item spans on small device. Value should be a number 1-12

property smOffset

smOffset?: gridSpans;

the number of columns the grid item is offset on small device. Value should be a number 1-12

property smRowSpan

smRowSpan?: gridSpans;

the number of rows the grid item spans on medium device. Value should be a number 1-12

property span

span?: gridSpans;

the number of columns the grid item spans. Value should be a number 1-12

property xl

xl?: gridSpans;

the number of columns the grid item spans on xLarge device. Value should be a number 1-12

property xl2

xl2?: gridSpans;

the number of columns the grid item spans on 2xLarge device. Value should be a number 1-12

property xl2Offset

xl2Offset?: gridSpans;

the number of columns the grid item is offset on 2xLarge device. Value should be a number 1-12

property xl2RowSpan

xl2RowSpan?: gridSpans;

the number of rows the grid item spans on 2xLarge device. Value should be a number 1-12

property xlOffset

xlOffset?: gridSpans;

the number of columns the grid item is offset on xLarge device. Value should be a number 1-12

property xlRowSpan

xlRowSpan?: gridSpans;

the number of rows the grid item spans on large device. Value should be a number 1-12

interface GridProps

interface GridProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Grid layout

property className

className?: string;

additional classes added to the Grid layout

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Sets the base component to render. defaults to div

property hasGutter

hasGutter?: boolean;

Adds space between children.

property lg

lg?: gridItemSpanValueShape;

the number of columns all grid items should span on a large device

property md

md?: gridItemSpanValueShape;

the number of columns all grid items should span on a medium device

property order

order?: {
    default?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

Modifies the flex layout element order property

property sm

sm?: gridItemSpanValueShape;

the number of columns all grid items should span on a small device

property span

span?: gridItemSpanValueShape;

The number of rows a column in the grid should span. Value should be a number 1-12

property xl

xl?: gridItemSpanValueShape;

the number of columns all grid items should span on a xLarge device

property xl2

xl2?: gridItemSpanValueShape;

the number of columns all grid items should span on a 2xLarge device

interface HelperTextItemProps

interface HelperTextItemProps
    extends React.HTMLProps<HTMLDivElement | HTMLLIElement> {}

property children

children?: React.ReactNode;

Content rendered inside the helper text item.

property className

className?: string;

Additional classes applied to the helper text item.

property component

component?: 'div' | 'li';

Sets the component type of the helper text item.

property icon

icon?: React.ReactNode;

Custom icon prefixing the helper text. This property will override the default icon when the variant property is passed in.

property id

id?: string;

ID for the helper text item. The value of this prop can be passed into a form component's aria-describedby prop when you intend for only specific helper text items to be announced to assistive technologies.

property screenReaderText

screenReaderText?: string;

Text that is only accessible to screen readers in order to announce the variant of a helper text item. This prop can only be used when the variant prop has a value other than "default".

property variant

variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';

Variant styling of the helper text item. Will also render a default icon, which can be overridden with the icon prop.

interface HelperTextProps

interface HelperTextProps
    extends React.HTMLProps<HTMLDivElement | HTMLUListElement> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the helper text when component is a "ul".

property children

children?: React.ReactNode;

Content rendered inside the helper text container.

property className

className?: string;

Additional classes applied to the helper text container.

property component

component?: 'div' | 'ul';

Component type of the helper text container

property id

id?: string;

ID for the helper text container. The value of this prop can be passed into a form component's aria-describedby prop when you intend for all helper text items to be announced to assistive technologies.

property isLiveRegion

isLiveRegion?: boolean;

Flag for indicating whether the helper text container is a live region. Use this prop when you expect or intend for any helper text items within the container to be dynamically updated.

interface HeroProps

interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {}

The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark).

property backgroundSrcDark

backgroundSrcDark?: string;

Dark theme background image path of the hero

property backgroundSrcLight

backgroundSrcLight?: string;

Light theme background image path of the hero

property bodyMaxWidth

bodyMaxWidth?: string;

Modifies the max-width of the hero body.

property bodyWidth

bodyWidth?: string;

Modifies the width of the hero body.

property children

children?: React.ReactNode;

Content of the hero

property className

className?: string;

Additional classes added to the hero

property gradientDark

gradientDark?: {
    stop1?: string;
    stop2?: string;
    stop3?: string;
};

Dark theme gradient of the hero, taking any valid CSS color values for each stop property.

property gradientLight

gradientLight?: {
    stop1?: string;
    stop2?: string;
    stop3?: string;
};

Light theme gradient of the hero, taking any valid CSS color values for each stop property.

property isGlass

isGlass?: boolean;

Flag indicating the hero has glass styling when glass theme is applied.
Modifiers
- @beta

interface HintBodyProps

interface HintBodyProps {}

property children

children?: React.ReactNode;

Content rendered inside the hint body.

property className

className?: string;

Additional classes applied to the hint body.

interface HintFooterProps

interface HintFooterProps {}

property children

children?: React.ReactNode;

Content rendered inside the hint footer.

property className

className?: string;

Additional classes applied to the hint footer.

interface HintProps

interface HintProps {}

property actions

actions?: React.ReactNode;

Actions of the hint.

property children

children?: React.ReactNode;

Content rendered inside the hint.

property className

className?: string;

Additional classes applied to the hint.

property hasNoActionsOffset

hasNoActionsOffset?: boolean;

Flag indicating that the actions have no offset

interface HintTitleProps

interface HintTitleProps {}

property children

children?: React.ReactNode;

Content rendered inside the hint title.

property className

className?: string;

Additional classes applied to the hint title.

interface HorizontalOverflowObject

interface HorizontalOverflowObject {}

property defaultTitleText

defaultTitleText?: string;

The text which displays when an overflowing tab isn't selected

property popperProps

popperProps?: HorizontalOverflowPopperProps;

Additional props to spread to the popper menu.

property showTabCount

showTabCount?: boolean;

Flag which shows the count of overflowing tabs when enabled

property toggleAriaLabel

toggleAriaLabel?: string;

The aria label applied to the button which toggles the tab overflow menu

interface IconComponentProps

interface IconComponentProps
    extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {}

property children

children?: React.ReactNode;

Icon content

property className

className?: string;

Additional classes applied to the icon container

property defaultProgressArialabel

defaultProgressArialabel?: string;

Aria-label for the default progress icon

property iconSize

iconSize?: IconSize;

Size of icon. Overrides the icon size set by the size property.

property isInline

isInline?: boolean;

Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties.

property isInProgress

isInProgress?: boolean;

Indicates the icon is in progress. Setting this property to true will swap the icon with the progressIcon.

property progressIcon

progressIcon?: React.ReactNode;

Icon when isInProgress is set to true. Defaults to a 1em spinner.

property progressIconSize

progressIconSize?: IconSize;

Size of progress icon. Overrides the icon size set by the size property.

property shouldMirrorRTL

shouldMirrorRTL?: boolean;

Flag indicating whether the icon passed as children should be mirrored for right to left (RTL) languages. This will not mirror the icon passed to progressIcon.

property size

size?: IconSize;

Size of the icon component container and icon.

property status

status?: 'custom' | 'info' | 'success' | 'warning' | 'danger';

Status color of the icon

interface InputGroupItemProps

interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children: React.ReactNode;

Content rendered inside the input group item.

property className

className?: string;

Additional classes added to the input group item.

property isBox

isBox?: boolean;

Enables box styling to the input group item

property isDisabled

isDisabled?: boolean;

Flag to indicate if the input group item is disabled.

property isFill

isFill?: boolean;

Flag to indicate if the input group item should fill the available horizontal space

property isPlain

isPlain?: boolean;

Flag to indicate if the input group item is plain.

interface InputGroupProps

interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children: React.ReactNode;

Content rendered inside the input group.

property className

className?: string;

Additional classes added to the input group.

property innerRef

innerRef?: React.Ref<any>;

A reference object to attach to the input box

interface InputGroupTextProps

interface InputGroupTextProps
    extends React.HTMLProps<HTMLSpanElement | HTMLLabelElement> {}

property children

children: React.ReactNode;

Content rendered inside the input group text.

property className

className?: string;

Additional classes added to the input group text.

property component

component?: React.ReactNode;

Component that wraps the input group text.

property isDisabled

isDisabled?: boolean;

Flag to indicate if the input group text is disabled.

property isPlain

isPlain?: boolean;

Flag to to indicate if the input group item is plain.

interface JumpLinksItemProps

interface JumpLinksItemProps
    extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {}

property children

children?: React.ReactNode;

Text to be rendered inside span

property className

className?: string;

Class to add to li

property href

href: string;

Href for this link

property isActive

isActive?: boolean;

Whether this item is active. Parent JumpLinks component sets this when passed a scrollableSelector.

property node

node?: string | HTMLElement;

Selector or HTMLElement to spy on

property onClick

onClick?: (ev: React.MouseEvent) => void;

Click handler for anchor tag. Parent JumpLinks components tap into this.

interface JumpLinksListProps

interface JumpLinksListProps extends React.HTMLProps<HTMLUListElement> {}

property children

children?: React.ReactNode;

Text to be rendered inside span

property className

className?: string;

Classname to add to ul.

interface JumpLinksProps

interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the internal nav element. Defaults to the value of the label prop.

property activeIndex

activeIndex?: number;

The index of the child Jump link to make active.

property alwaysShowLabel

alwaysShowLabel?: boolean;

Flag to always show the label when using expandable

property children

children?: React.ReactNode;

Children nodes

property className

className?: string;

Class for nav

property expandable

expandable?: {
    default?: 'expandable' | 'nonExpandable';
    sm?: 'expandable' | 'nonExpandable';
    md?: 'expandable' | 'nonExpandable';
    lg?: 'expandable' | 'nonExpandable';
    xl?: 'expandable' | 'nonExpandable';
    '2xl'?: 'expandable' | 'nonExpandable';
};

When to collapse/expand at different breakpoints

property isCentered

isCentered?: boolean;

Whether to center children.

property isExpanded

isExpanded?: boolean;

On mobile whether or not the JumpLinks starts out expanded

property isVertical

isVertical?: boolean;

Whether the layout of children is vertical or horizontal.

property label

label?: React.ReactNode;

Label to add to nav element.

property labelId

labelId?: string;

Custom ID applied to label if alwaysShowLabel is applied, or expandable toggle. This is used for internal logic related to aria-label and aria-labelledby

property offset

offset?: number;

Offset to add to scrollPosition, potentially for a masthead which content scrolls under.

property scrollableRef

scrollableRef?:
    | HTMLElement
    | (() => HTMLElement)
    | React.RefObject<HTMLElement | null>;

Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying.

property scrollableSelector

scrollableSelector?: string;

Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying.

property shouldReplaceNavHistory

shouldReplaceNavHistory?: boolean;

Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history.

property toggleAriaLabel

toggleAriaLabel?: string;

Aria label for expandable toggle

interface KeyboardHandlerProps

interface KeyboardHandlerProps {}

property additionalKeyHandler

additionalKeyHandler?: (event: KeyboardEvent) => void;

Additional key handling outside of the included arrow keys, enter, and space handling

property containerRef

containerRef: React.RefObject<any>;

Reference of the container to apply keyboard interaction

property createNavigableElements

createNavigableElements: () => Element[];

Callback returning an array of navigable elements to be traversable via vertical arrow keys. This array should not include non-navigable elements such as disabled elements.

property getFocusableElement

getFocusableElement?: (navigableElement: Element) => Element;

Callback returning the focusable element of a given element from the navigable elements array

property isActiveElement

isActiveElement?: (navigableElement: Element) => boolean;

Callback to determine if a given element from the navigable elements array is the active element of the page

property isEventFromContainer

isEventFromContainer?: (event: KeyboardEvent) => boolean;

Callback to determine if a given event is from the container. By default the function conducts a basic check to see if the containerRef contains the event target

property noEnterHandling

noEnterHandling?: boolean;

Flag indicating that the included enter key handling should be ignored

property noHorizontalArrowHandling

noHorizontalArrowHandling?: boolean;

Flag indicating that the included horizontal arrow key handling should be ignored

property noSpaceHandling

noSpaceHandling?: boolean;

Flag indicating that the included space key handling should be ignored

property noVerticalArrowHandling

noVerticalArrowHandling?: boolean;

Flag indicating that the included vertical arrow key handling should be ignored

property onlyTraverseSiblings

onlyTraverseSiblings?: boolean;

Flag indicating that next focusable element of a horizontal movement will be this element's sibling

property updateTabIndex

updateTabIndex?: boolean;

Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex

property validSiblingTags

validSiblingTags?: string[];

Valid sibling tags that horizontal arrow handling will focus

interface LabelGroupProps

interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {}

property 'aria-label'

'aria-label'?: string;

Aria label for label group that does not have a category name

property addLabelControl

addLabelControl?: React.ReactNode;

Control for adding new labels

property categoryName

categoryName?: string;

Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied

property children

children?: React.ReactNode;

Content rendered inside the label group. Should be elements.

property className

className?: string;

Additional classes added to the label item

property closeBtnAriaLabel

closeBtnAriaLabel?: string;

Aria label for close button

property collapsedText

collapsedText?: string;

Customizable template string. Use variable "${remaining}" for the overflow label count.

property defaultIsOpen

defaultIsOpen?: boolean;

Flag for having the label group default to expanded

property editableTextAreaProps

editableTextAreaProps?: any;

Additional props passed to the editable textarea.

property expandedText

expandedText?: string;

Customizable "Show Less" text string

property hasEditableTextArea

hasEditableTextArea?: boolean;

Flag indicating the editable label group should be appended with a textarea.

property isClosable

isClosable?: boolean;

Flag if label group can be closed

property isCompact

isCompact?: boolean;

Flag indicating the labels in the group are compact

property isEditable

isEditable?: boolean;

Flag indicating contained labels are editable. Allows spacing for a text input after the labels.

property isVertical

isVertical?: boolean;

Flag to implement a vertical layout

property numLabels

numLabels?: number;

Set number of labels to show before overflow

property onClick

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

Function that is called when clicking on the label group close button

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the tooltip which is displayed if the category name text is longer

interface LabelProps

interface LabelProps extends React.HTMLProps<HTMLSpanElement> {}

property children

children?: React.ReactNode;

Content rendered inside the label.

property className

className?: string;

Additional classes added to the label.

property closeBtn

closeBtn?: React.ReactNode;

Node for custom close button.

property closeBtnAriaLabel

closeBtnAriaLabel?: string;

Aria label for close button

property closeBtnProps

closeBtnProps?: any;

Additional properties for the default close button.

property color

color?:
    | 'blue'
    | 'teal'
    | 'green'
    | 'orange'
    | 'purple'
    | 'red'
    | 'orangered'
    | 'grey'
    | 'yellow'
    | LabelColor;

Color of the label.

property editableProps

editableProps?: any;

Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control.

property href

href?: string;

Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in.

property icon

icon?: React.ReactNode;

Icon added to the left of the label text. Overrides the icon set by the status property.

property isClickable

isClickable?: boolean;

Flag indicating the label is clickable. This flag will automatically be set if a href is passed, or if an onClick handler is passed and the label is not an overflow or add variant. This should be manually set when using the render prop.

property isCompact

isCompact?: boolean;

Flag indicating the label is compact.

property isDisabled

isDisabled?: boolean;

Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in.

property isEditable

isEditable?: boolean;

Flag indicating the label is editable.

property onClick

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

Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in.

property onClose

onClose?: (event: React.MouseEvent) => void;

Close click callback for removable labels. If present, label will have a close button.

property onEditCancel

onEditCancel?: (event: KeyboardEvent, previousText: string) => void;

Callback when an editable label cancels an edit.

property onEditComplete

onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;

Callback when an editable label completes an edit.

property render

render?: ({
    className,
    content,
    componentRef,
}: {
    className: string;
    content: React.ReactNode;
    componentRef: any;
}) => React.ReactNode;

Forwards the label content and className to rendered function. Use this prop for react router support.

property status

status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';

Status of the label with a respective icon and color. Overrides the color set by the color property.

property textMaxWidth

textMaxWidth?: string;

The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'.

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the tooltip which is displayed if text is truncated

property variant

variant?: 'outline' | 'filled' | 'overflow' | 'add';

Variant of the label.

interface LevelItemProps

interface LevelItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Level Layout Item

interface LevelProps

interface LevelProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the Level layout

property className

className?: string;

additional classes added to the Level layout

property hasGutter

hasGutter?: boolean;

Adds space between children.

interface ListItemProps

interface ListItemProps extends React.HTMLProps<HTMLLIElement> {}

property children

children: React.ReactNode;

Anything that can be rendered inside of list item

property className

className?: string;

Additional classes added to the list item

property icon

icon?: React.ReactNode | null;

Icon for the list item

interface ListProps

interface ListProps
    extends Omit<React.HTMLProps<HTMLUListElement | HTMLOListElement>, 'type'> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the list.

property children

children?: React.ReactNode;

Anything that can be rendered inside of the list

property className

className?: string;

Additional classes added to the list

property component

component?: 'ol' | 'ul';

Sets the type of the list component.

property iconSize

iconSize?: 'default' | 'large';

Modifies the size of the icons in the list

property isBordered

isBordered?: boolean;

Modifies the list to add borders between items

property isPlain

isPlain?: boolean;

Modifies the list to include plain styling

property type

type?: OrderType;

Sets the way items are numbered if component is set to "ol".

property variant

variant?: ListVariant.inline;

Adds list variant styles

interface LoginFooterItemProps

interface LoginFooterItemProps extends React.HTMLProps<HTMLAnchorElement> {}

property children

children?: React.ReactNode;

Content rendered inside the footer link item

property className

className?: string;

Additional classes added to the footer link item

property href

href?: string;

The URL of the footer link item

property target

target?: string;

Specifies where to open the linked document

interface LoginFooterProps

interface LoginFooterProps extends React.HTMLProps<HTMLElement> {}

property children

children?: React.ReactNode;

Content rendered inside the footer of the login layout

property className

className?: string;

Additional props are spread to the container

interface LoginFormProps

interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {}

property className

className?: string;

Additional classes added to the login main body's form

property helperText

helperText?: React.ReactNode;

Content displayed in the helper text component *

property helperTextIcon

helperTextIcon?: React.ReactNode;

Icon displayed to the left in the helper text

property hidePasswordAriaLabel

hidePasswordAriaLabel?: string;

Accessible label for the hide password button

property isLoginButtonDisabled

isLoginButtonDisabled?: boolean;

Flag indicating if the login button is disabled

property isPasswordRequired

isPasswordRequired?: boolean;

Flag indicating if password is required

property isRememberMeChecked

isRememberMeChecked?: boolean;

Flag indicating if the remember me checkbox is checked.

property isShowPasswordEnabled

isShowPasswordEnabled?: boolean;

Flag indicating if the user can toggle hiding the password

property isValidPassword

isValidPassword?: boolean;

Flag indicating if the password is valid

property isValidUsername

isValidUsername?: boolean;

Flag indicating if the username is valid

property loginButtonLabel

loginButtonLabel?: string;

Label for the log in button input

property noAutoFocus

noAutoFocus?: boolean;

Flag to indicate if the first dropdown item should not gain initial focus

property onChangePassword

onChangePassword?: (
    event: React.FormEvent<HTMLInputElement>,
    value: string
) => void;

Function that handles the onChange event for the password

property onChangeRememberMe

onChangeRememberMe?: (
    event: React.FormEvent<HTMLInputElement>,
    checked: boolean
) => void;

Function that handles the onChange event for the remember me checkbox

property onChangeUsername

onChangeUsername?: (
    event: React.FormEvent<HTMLInputElement>,
    value: string
) => void;

Function that handles the onChange event for the username

property onLoginButtonClick

onLoginButtonClick?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;

Function that is called when the login button is clicked

property passwordLabel

passwordLabel?: string;

Label for the password input field

property passwordValue

passwordValue?: string;

Value for the password

property rememberMeLabel

rememberMeLabel?: string;

Label for the remember me checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show.

property showHelperText

showHelperText?: boolean;

Flag indicating the helper text is visible *

property showPasswordAriaLabel

showPasswordAriaLabel?: string;

Accessible label for the show password button

property usernameLabel

usernameLabel?: string;

Label for the username input field

property usernameValue

usernameValue?: string;

Value for the username

interface LoginHeaderProps

interface LoginHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the header of the login layout

property className

className?: string;

Additional classes added to the login header

property headerBrand

headerBrand?: React.ReactNode;

Header brand component (e.g. )

interface LoginMainBodyProps

interface LoginMainBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the login main body

property className

className?: string;

Additional classes added to the login main body

interface LoginMainFooterBandItemProps

interface LoginMainFooterBandItemProps
    extends React.HTMLProps<HTMLParagraphElement> {}

property children

children?: React.ReactNode;

Content rendered inside the footer link item

property className

className?: string;

Additional classes added to the footer link item

interface LoginMainFooterLinksItemProps

interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIElement> {}

property children

children?: React.ReactNode;

Content rendered inside the footer link item

property className

className?: string;

Additional classes added to the footer link item

interface LoginMainFooterProps

interface LoginMainFooterProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the login main footer

property className

className?: string;

Additional classes added to the login main footer

property forgotCredentials

forgotCredentials?: React.ReactNode;

Content rendered inside of login main footer band do display a forgot credentials link*

property signUpForAccountMessage

signUpForAccountMessage?: React.ReactNode;

Content rendered inside of login main footer band to display a sign up for account message

property socialMediaLoginAriaLabel

socialMediaLoginAriaLabel?: string;

Adds an accessible name to the social media login list.

property socialMediaLoginContent

socialMediaLoginContent?: React.ReactNode;

Content rendered inside the login main footer as social media links

interface LoginMainHeaderProps

interface LoginMainHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the login main header

property className

className?: string;

Additional classes added to the login main header

property headerUtilities

headerUtilities?: React.ReactNode;

Actions that render for the login main header

property subtitle

subtitle?: string;

Subtitle that contains the text, URL, and URL text for the login main header

property title

title?: string;

Title for the login main header

interface LoginPageProps

interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {}

property backgroundImgSrc

backgroundImgSrc?: string;

Attribute that specifies the URL of the background image for the login page

property brandImgAlt

brandImgAlt?: string;

Attribute that specifies the alt text of the brand image for the login page

property brandImgProps

brandImgProps?: BrandProps;

Additional props for the brand image for the login page

property brandImgSrc

brandImgSrc?: string;

Attribute that specifies the URL of the brand image for the login page

property children

children?: React.ReactNode;

Anything that can be rendered inside of the login page (e.g. )

property className

className?: string;

Additional classes added to the login page

property footerListItems

footerListItems?: React.ReactNode;

Items rendered inside of the footer list component of the login page

property footerListVariants

footerListVariants?: ListVariant.inline;

Adds list variant styles for the footer list component of the login page. The only current value is'inline'

property forgotCredentials

forgotCredentials?: React.ReactNode;

Content rendered inside of login main footer band to display a forgot credentials link.

property headerUtilities

headerUtilities?: React.ReactNode;

Header utilities for the login main body header of the login page

property loginSubtitle

loginSubtitle?: string;

Subtitle for the login main body header of the login page

property loginTitle

loginTitle: string;

Title for the login main body header of the login page

property signUpForAccountMessage

signUpForAccountMessage?: React.ReactNode;

Content rendered inside of login main footer band to display a sign up for account message

property socialMediaLoginAriaLabel

socialMediaLoginAriaLabel?: string;

Adds an accessible name to the social media login list.

property socialMediaLoginContent

socialMediaLoginContent?: React.ReactNode;

Content rendered inside of social media login footer section

property textContent

textContent?: string;

Content rendered inside of the text component of the login page

interface LoginProps

interface LoginProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the main section of the login layout

property className

className?: string;

Additional classes added to the login layout

footer?: React.ReactNode;

Footer component (e.g. )

header?: React.ReactNode;

Header component (e.g. )

interface MastheadBrandProps

interface MastheadBrandProps
    extends React.DetailedHTMLProps<
        React.HTMLProps<HTMLDivElement>,
        HTMLDivElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside of the masthead brand.

property className

className?: string;

Additional classes added to the masthead brand.

interface MastheadContentProps

interface MastheadContentProps
    extends React.DetailedHTMLProps<
        React.HTMLProps<HTMLDivElement>,
        HTMLDivElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside of the masthead content block.

property className

className?: string;

Additional classes added to the masthead content.

interface MastheadLogoProps

interface MastheadLogoProps
    extends React.DetailedHTMLProps<
        React.HTMLProps<HTMLAnchorElement>,
        HTMLAnchorElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside of the masthead logo.

property className

className?: string;

Additional classes added to the masthead logo.

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Component type of the masthead logo.

property isCompact

isCompact?: boolean;

Flag indicating the logo is a compact variant. Used in docked layouts.
Modifiers
- @beta

interface MastheadMainProps

interface MastheadMainProps
    extends React.DetailedHTMLProps<
        React.HTMLProps<HTMLDivElement>,
        HTMLDivElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside of the masthead main block.

property className

className?: string;

Additional classes added to the masthead main.

interface MastheadProps

interface MastheadProps
    extends React.DetailedHTMLProps<
        React.HTMLProps<HTMLDivElement>,
        HTMLDivElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside of the masthead

property className

className?: string;

Additional classes added to the masthead

property display

display?: {
    default?: 'inline' | 'stack';
    sm?: 'inline' | 'stack';
    md?: 'inline' | 'stack';
    lg?: 'inline' | 'stack';
    xl?: 'inline' | 'stack';
    '2xl'?: 'inline' | 'stack';
};

Display type at various breakpoints

property inset

inset?: {
    default?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    sm?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    md?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    lg?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    xl?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
    '2xl'?:
        | 'insetNone'
        | 'insetXs'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl'
        | 'inset3xl';
};

Insets at various breakpoints

property variant

variant?: 'default' | 'docked';

Indicates the variant of the masthead
Modifiers
- @beta

interface MastheadToggleProps

interface MastheadToggleProps
    extends React.DetailedHTMLProps<
        React.HTMLProps<HTMLDivElement>,
        HTMLDivElement
    > {}

property children

children?: React.ReactNode;

Content rendered inside of the masthead toggle.

property className

className?: string;

Additional classes added to the masthead toggle.

interface MenuBreadcrumbProps

interface MenuBreadcrumbProps
    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'> {}

property children

children?: React.ReactNode;

Items within breadcrumb menu container

interface MenuContainerProps

interface MenuContainerProps {}

property focusTimeoutDelay

focusTimeoutDelay?: number;

Time in ms to wait before firing the toggles' focus event. Defaults to 0

property isOpen

isOpen: boolean;

Flag to indicate if menu is opened.

menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>;

Menu to be rendered

property menuRef

menuRef: React.RefObject<any>;

Reference to the menu

property onOpenChange

onOpenChange?: (isOpen: boolean) => void;

Callback to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys.

property onOpenChangeKeys

onOpenChangeKeys?: string[];

Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.

property onToggleKeydown

onToggleKeydown?: (event: KeyboardEvent) => void;

Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.

property popperProps

popperProps?: PopperOptions;

Additional properties to pass to the Popper

property shouldFocusFirstItemOnOpen

shouldFocusFirstItemOnOpen?: boolean;

Flag indicating the first menu item should be focused after opening the dropdown.
Modifiers
- @beta

property shouldPreventScrollOnItemFocus

shouldPreventScrollOnItemFocus?: boolean;

Flag indicating if scroll on focus of the first menu item should occur.

property toggle

toggle: React.ReactNode;

Toggle to be rendered

property toggleRef

toggleRef: React.RefObject<any>;

Reference to the toggle

property zIndex

zIndex?: number;

z-index of the dropdown menu

interface MenuContentProps

interface MenuContentProps extends React.HTMLProps<HTMLElement> {}

property children

children?: React.ReactNode;

Items within group

property getHeight

getHeight?: (height: string) => void;

Callback to return the height of the menu content

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property maxMenuHeight

maxMenuHeight?: string;

Maximum height of menu content

property menuHeight

menuHeight?: string;

Height of the menu content

interface MenuFooterProps

interface MenuFooterProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the footer

property className

className?: string;

Additional classes added to the footer

interface MenuGroupProps

interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {}

property children

children?: React.ReactNode;

Items within group

property className

className?: string;

Additional classes added to the MenuGroup

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property label

label?: React.ReactNode;

Group label

property labelHeadingLevel

labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

Group label heading level. Default is h1.

property titleId

titleId?: string;

ID for title label

interface MenuItemActionProps

interface MenuItemActionProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label': string;

Accessibility label

property actionId

actionId?: any;

Identifies the action item in the onActionClick on the Menu

property className

className?: string;

Additional classes added to the action button

property icon

icon?: 'favorites' | React.ReactNode;

The action icon to use

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property isDisabled

isDisabled?: boolean;

Disables action, can also be specified on the MenuItem instead

property isFavorited

isFavorited?: boolean;

Flag indicating if the item is favorited

property onClick

onClick?: (event?: any) => void;

Callback on action click, can also specify onActionClick on the Menu instead

interface MenuItemProps

interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the menu item.

property actions

actions?: React.ReactNode;

Render item with one or more actions

property children

children?: React.ReactNode;

Content rendered inside the menu list item.

property className

className?: string;

Additional classes added to the menu list item

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Component used to render the menu item

property description

description?: React.ReactNode;

Description of the menu item

property direction

direction?: 'down' | 'up';

Sub menu direction

property download

download?: string;

Navigation link download. Only set when the to property is present.

property drilldownMenu

drilldownMenu?: React.ReactNode | (() => React.ReactNode);

Drilldown menu of the item. Should be a Menu or DrilldownMenu type.

flyoutMenu?: React.ReactElement<any>;

Flyout menu. Should not be used if the to prop is defined.

property hasCheckbox

hasCheckbox?: boolean;

Flag indicating the item has a checkbox

property icon

icon?: React.ReactNode;

Render item with icon

property id

id?: string;

Sets the id attribute on the menu item component.

property innerRef

innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;

Forwarded ref

property isActive

isActive?: boolean;

Flag indicating whether the item is active

property isAriaDisabled

isAriaDisabled?: boolean;

Render item as aria-disabled option

property isDanger

isDanger?: boolean;

Flag indicating the item is in danger state

property isDisabled

isDisabled?: boolean;

Render item as disabled option

property isExternalLink

isExternalLink?: boolean;

Render an external link icon on focus or hover, and set the link's "target" attribute to a value of "_blank".

property isFavorited

isFavorited?: boolean;

Flag indicating if the item is favorited

property isFocused

isFocused?: boolean;

Flag indicating the item is focused

property isLoadButton

isLoadButton?: boolean;

Flag indicating if the item causes a load

property isLoading

isLoading?: boolean;

Flag indicating a loading state

property isOnPath

isOnPath?: boolean;

True if item is on current selection path

property isSelected

isSelected?: boolean;

Flag indicating if the option is selected

property itemId

itemId?: any;

Identifies the component in the Menu onSelect or onActionClick callback

property onClick

onClick?: (event?: any) => void;

Callback for item click

property onShowFlyout

onShowFlyout?: (event?: any) => void;

Callback function when mouse leaves trigger

property rel

rel?: string;

Navigation link relationship. Only set when the to property is present.

property target

target?: string;

Navigation link target. Only set when the to property is present. If isExternalLink is also passed in, this property will be set to "_blank".

property to

to?: string;

Target navigation link. Should not be used if the flyout prop is defined.

property tooltipProps

tooltipProps?: TooltipProps;

Props for adding a tooltip to a menu item

interface MenuListProps

interface MenuListProps extends React.HTMLProps<HTMLUListElement> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the menu.

property children

children: React.ReactNode;

Anything that can be rendered inside of menu list

property className

className?: string;

Additional classes added to the menu list

property isAriaMultiselectable

isAriaMultiselectable?: boolean;

Indicates to assistive technologies whether more than one item can be selected for a non-checkbox menu. Only applies when the menu's role is "listbox".

interface MenuProps

interface MenuProps
    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'>,
        OUIAProps {}

property activeItemId

activeItemId?: string | number;

itemId of the currently active item. You can also specify isActive on the MenuItem.

property activeMenu

activeMenu?: string;

ID of the currently active menu for the drilldown variant

property children

children?: React.ReactNode;

Anything that can be rendered inside of the Menu

property className

className?: string;

Additional classes added to the Menu

property containsDrilldown

containsDrilldown?: boolean;

Indicates if menu contains a drilldown menu

property containsFlyout

containsFlyout?: boolean;

Indicates if menu contains a flyout menu

property drilldownItemPath

drilldownItemPath?: string[];

Indicates the path of drilled in menu itemIds

property drilledInMenus

drilledInMenus?: string[];

Array of menus that are drilled in

property id

id?: string;

ID of the menu

property innerRef

innerRef?: React.Ref<HTMLDivElement>;

Forwarded ref

property isMenuDrilledIn

isMenuDrilledIn?: boolean;

Indicates if a menu is drilled into

property isNavFlyout

isNavFlyout?: boolean;

Indicating that the menu should have nav flyout styling

property isPlain

isPlain?: boolean;

Indicates if the menu should be without the outer box-shadow

property isRootMenu

isRootMenu?: boolean;

Internal flag indicating if the Menu is the root of a menu tree

property isScrollable

isScrollable?: boolean;

Indicates if the menu should be srollable

property onActionClick

onActionClick?: (event?: any, itemId?: any, actionId?: any) => void;

Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction.

property onDrillIn

onDrillIn?: (
    event: React.KeyboardEvent | React.MouseEvent,
    fromItemId: string,
    toItemId: string,
    itemId: string
) => void;

Callback for drilling into a submenu

property onDrillOut

onDrillOut?: (
    event: React.KeyboardEvent | React.MouseEvent,
    toItemId: string,
    itemId: string
) => void;

Callback for drilling out of a submenu

property onGetMenuHeight

onGetMenuHeight?: (menuId: string, height: number) => void;

Callback for collecting menu heights

property onSelect

onSelect?: (event?: React.MouseEvent, itemId?: MenuItemProps['itemId']) => void;

Callback for updating when item selection changes. You can also specify onClick on the MenuItem.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property parentMenu

parentMenu?: string;

ID of parent menu for drilldown menus

property role

role?: string;

Determines the accessible role of the menu. For a non-checkbox menu that can have one or more items selected, pass in "listbox".

property selected

selected?: any | any[];

Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem.

interface MenuSearchInputProps

interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {}

property children

children?: React.ReactNode;

Items within input

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

interface MenuSearchProps

interface MenuSearchProps extends React.HTMLProps<HTMLElement> {}

property children

children?: React.ReactNode;

Items within search

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

interface MenuState

interface MenuState {}

property currentDrilldownMenuId

currentDrilldownMenuId: string;

property flyoutRef

flyoutRef: React.Ref<HTMLLIElement> | null;

property transitionMoveTarget

transitionMoveTarget: HTMLElement;

interface MenuToggleActionProps

interface MenuToggleActionProps {}

property children

children?: React.ReactNode;

Element to be rendered inside the

property className

className?: string;

Additional classes added to the MenuToggleAction

property id

id?: string;

Id of the action button

property isDisabled

isDisabled?: boolean;

Flag to show if the action button is disabled

property onClick

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

A callback for when the action button is clicked

interface MenuToggleCheckboxProps

interface MenuToggleCheckboxProps
    extends Omit<
            React.HTMLProps<HTMLInputElement>,
            'type' | 'onChange' | 'disabled' | 'checked'
        >,
        OUIAProps {}

property children

children?: React.ReactNode;

Element to be rendered inside the

property className

className?: string;

Additional classes added to the MenuToggleCheckbox

property defaultChecked

defaultChecked?: boolean;

Flag to set the default checked value of the checkbox when it is uncontrolled by React state. To make the checkbox controlled instead use the isChecked prop, but do not use both.

property id

id: string;

Id of the checkbox

property isChecked

isChecked?: boolean | null;

Flag to show if the checkbox is checked when it is controlled by React state. To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both.

property isDisabled

isDisabled?: boolean;

Flag to show if the checkbox is disabled

property isValid

isValid?: boolean;

Flag to show if the checkbox selection is valid or invalid

property onChange

onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;

A callback for when the checkbox selection changes

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface MenuToggleProps

interface MenuToggleProps
    extends Omit<
            React.DetailedHTMLProps<
                React.ButtonHTMLAttributes<HTMLButtonElement> &
                    React.HTMLAttributes<HTMLDivElement>,
                MenuToggleElement
            >,
            'ref'
        >,
        OUIAProps {}

property badge

badge?: BadgeProps | React.ReactNode;

Optional badge rendered inside the toggle, after the children content

property children

children?: React.ReactNode;

Content rendered inside the toggle

property className

className?: string;

Additional classes added to the toggle

property icon

icon?: React.ReactNode;

Optional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.

property innerRef

innerRef?: React.Ref<MenuToggleElement>;

Forwarded ref

property isCircle

isCircle?: boolean;

Flag indicating the toggle has circular styling. Can only be applied to plain toggles.
Modifiers
- @beta

property isDisabled

isDisabled?: boolean;

Flag indicating the toggle is disabled

property isDocked

isDocked?: boolean;

Flag indicating the menu toggle is a docked variant. For use in docked navigation.
Modifiers
- @beta

property isExpanded

isExpanded?: boolean;

Flag indicating the toggle has expanded styling

property isFullHeight

isFullHeight?: boolean;

Flag indicating the toggle is full height

property isFullWidth

isFullWidth?: boolean;

Flag indicating the toggle takes up the full width of its parent

property isInForm

isInForm?: boolean;

Flag indicating the toggle is placed inside a form
Modifiers
- @beta

property isPlaceholder

isPlaceholder?: boolean;

Flag indicating the toggle contains placeholder text

property isSettings

isSettings?: boolean;

Flag indicating whether the toggle is a settings toggle. This will override the icon property

property isTextExpanded

isTextExpanded?: boolean;

Flag indicating the docked toggle should display text. Only applies when isDocked is true.
Modifiers
- @beta

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property size

size?: 'default' | 'sm';

Adds styling which affects the size of the menu toggle

property splitButtonItems

splitButtonItems?: React.ReactNode[];

Elements to display before the toggle button. When included, renders the menu toggle as a split button.

property status

status?: 'success' | 'warning' | 'danger';

Status styles of the menu toggle

property statusIcon

statusIcon?: React.ReactNode;

Overrides the status icon

property variant

variant?:
    | 'default'
    | 'plain'
    | 'primary'
    | 'plainText'
    | 'secondary'
    | 'typeahead';

Variant styles of the menu toggle

interface ModalBodyProps

interface ModalBodyProps extends React.HTMLProps<HTMLDivElement> {}

Renders content in the body of the modal

property 'aria-label'

'aria-label'?: string;

Accessible label applied to the modal body. This should be used to communicate important information about the modal body div element if needed, such as when it is scrollable.

property children

children?: React.ReactNode;

Content rendered inside the modal body.

property className

className?: string;

Additional classes added to the modal body.

property role

role?: string;

Accessible role applied to the modal body. This will default to "region" if the aria-label property is passed in. Set to a more appropriate role as applicable based on the modal content and context.

interface ModalFooterProps

interface ModalFooterProps {}

Renders content in the footer of the modal

property children

children?: React.ReactNode;

Content rendered inside the modal footer.

property className

className?: string;

Additional classes added to the modal footer.

interface ModalHeaderProps

interface ModalHeaderProps {}

Renders content in the header of the modal

property children

children?: React.ReactNode;

Custom content rendered inside the modal header. If children are supplied then the tile, tileIconVariant and titleScreenReaderText props are ignored.

property className

className?: string;

Additional classes added to the modal header.

property description

description?: React.ReactNode;

Description of the modal.

property descriptorId

descriptorId?: string;

Id of the modal description.

property help

help?: React.ReactNode;

Optional help section for the modal header.

property labelId

labelId?: string;

Id of the modal title.

property title

title?: React.ReactNode;

Content rendered inside the modal title.

property titleIconVariant

titleIconVariant?:
    | 'success'
    | 'danger'
    | 'warning'
    | 'info'
    | 'custom'
    | React.ComponentType<any>;

Optional alert icon (or other) to show before the title. When the predefined alert types are used the default styling will be automatically applied.

property titleScreenReaderText

titleScreenReaderText?: string;

Optional title label text for screen readers.

interface ModalProps

interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {}

property 'aria-describedby'

'aria-describedby'?: string;

Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId.

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the modal when there is no title in the ModalHeader.

property 'aria-labelledby'

'aria-labelledby'?: string;

Id to use for the modal box label. This should include the ModalHeader labelId.

property appendTo

appendTo?: HTMLElement | (() => HTMLElement);

The parent container to append the modal to. Defaults to "document.body".

property backdropClassName

backdropClassName?: string;

Additional classes added to the modal backdrop.

property children

children: React.ReactNode;

Content rendered inside the modal.

property className

className?: string;

Additional classes added to the modal.

property disableFocusTrap

disableFocusTrap?: boolean;

Flag to disable focus trap.

property elementToFocus

elementToFocus?: HTMLElement | SVGElement | string;

The element to focus when the modal opens. By default the first focusable element will receive focus.

property focusTrapId

focusTrapId?: string;

Id of the focus trap in the ModalContent component

property id

id?: string;

An id to use for the modal box container.

property isOpen

isOpen?: boolean;

Flag to show the modal.

property maxWidth

maxWidth?: number | string;

Maximum width of the modal.

property onClose

onClose?: (event: KeyboardEvent | React.MouseEvent) => void;

Add callback for when the close button is clicked. This prop needs to be passed to render the close button

property onEscapePress

onEscapePress?: (event: KeyboardEvent) => void;

Modal handles pressing of the escape key and closes the modal. If you want to handle this yourself you can use this callback function.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property position

position?: 'default' | 'top';

Position of the modal. By default a modal will be positioned vertically and horizontally centered.

property positionOffset

positionOffset?: string;

Offset from alternate position. Can be any valid CSS length/percentage.

property variant

variant?: 'small' | 'medium' | 'large' | 'default';

Variant of the modal.

property width

width?: number | string;

Default width of the modal.

interface Mods

interface Mods {}

property '2xl'

'2xl'?: string;

property '3xl'

'3xl'?: string;

property '4xl'

'4xl'?: string;

property default

default?: string;

property lg

lg?: string;

property md

md?: string;

property sm

sm?: string;

property xl

xl?: string;

property xs

xs?: string;

interface MultipleFileUploadMainProps

interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElement> {}

Creates the visual upload interface, including the area to drag and drop files, an optional upload button, and descriptive instructions.

property browseButtonText

browseButtonText?: string;

Visible text label for the upload button

property className

className?: string;

Class to add to outer div

property infoText

infoText?: React.ReactNode;

Content rendered inside the info div

property isUploadButtonHidden

isUploadButtonHidden?: boolean;

Flag to prevent the upload button from being rendered

property titleIcon

titleIcon?: React.ReactNode;

Content rendered inside the title icon div

property titleText

titleText?: React.ReactNode;

Content rendered inside the title text div

property titleTextSeparator

titleTextSeparator?: React.ReactNode;

Content rendered inside the title text separator div

interface MultipleFileUploadProps

interface MultipleFileUploadProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'value'> {}

Acts as a container for all other MultipleFileUpload sub-components. This sub-component also provides the functionality for file uploads, and access to the uploaded files via a callback.

property children

children?: React.ReactNode;

Content rendered inside the multi upload field

property className

className?: string;

Class to add to outer div

property dropzoneProps

dropzoneProps?: DropzoneOptions;

Optional extra props to customize react-dropzone.

property isHorizontal

isHorizontal?: boolean;

Flag setting the component to horizontal styling mode

property onFileDrop

onFileDrop?: (event: DropEvent, data: File[]) => void;

When files are dropped or uploaded this callback will be called with all accepted files

interface MultipleFileUploadStatusItemProps

interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLLIElement> {}

Automatically reads an uploaded file to render a visual representation of it, including its name, size, and read status. This sub-component also allows custom reading of files via various callbacks which will override the automatic reading behavior.

property buttonAriaLabel

buttonAriaLabel?: string;

Adds accessibility text to the status item deletion button

property className

className?: string;

Class to add to outer div

property customFileHandler

customFileHandler?: (file: File) => void;

A callback to process file reading in a custom way

property file

file?: File;

The file object being represented by the status item

property fileIcon

fileIcon?: React.ReactNode;

A custom icon to show in place of the generic file icon

property fileName

fileName?: string;

A custom name to display for the file rather than using built in functionality to auto-fill it

property fileSize

fileSize?: number;

A custom file size to display for the file rather than using built in functionality to auto-fill it

property onClearClick

onClearClick?: React.MouseEventHandler<HTMLButtonElement>;

Clear button was clicked

property onReadFail

onReadFail?: (error: DOMException, onReadFail: File) => void;

A callback for when the FileReader API fails

property onReadFinished

onReadFinished?: (fileHandle: File) => void;

A callback for when a selected file finishes loading

property onReadStarted

onReadStarted?: (fileHandle: File) => void;

A callback for when a selected file starts loading

property onReadSuccess

onReadSuccess?: (data: string, file: File) => void;

A callback for when the FileReader successfully reads the file

property progressAriaDescribedBy

progressAriaDescribedBy?: string;

Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in.

property progressAriaLabel

progressAriaLabel?: string;

Adds accessible text to the progress bar. Required when title not used and there is not any label associated with the progress bar

property progressAriaLabelledBy

progressAriaLabelledBy?: string;

Associates the progress bar with it's label for accessibility purposes. Required when title not used

property progressAriaLiveMessage

progressAriaLiveMessage?: string | ((loadPercentage: number) => string);

Modifies the text announced by assistive technologies when the progress bar updates.

property progressHelperText

progressHelperText?: React.ReactNode;

Additional content related to the status item.

property progressId

progressId?: string;

Unique identifier for progress. Generated if not specified.

property progressValue

progressValue?: number;

A custom value to display for the progress component rather than using built in functionality to auto-fill it

property progressVariant

progressVariant?: 'danger' | 'success' | 'warning';

A custom variant to apply to the progress component rather than using built in functionality to auto-fill it

interface MultipleFileUploadStatusProps

interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivElement> {}

Acts as an expandable container for all uploaded file statuses. An optional text and/or icon can also be passed into this sub-component. This sub-component can be conditionally rendered when at least 1 file has been attempted to be uploaded.

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the list of status items.

property children

children?: React.ReactNode;

Content rendered inside multi file upload status list

property className

className?: string;

Class to add to outer div

property statusToggleIcon

statusToggleIcon?: 'danger' | 'success' | 'inProgress' | React.ReactNode;

Icon to show in the status toggle

property statusToggleText

statusToggleText?: string;

String to show in the status toggle

interface NavContextProps

interface NavContextProps {}

property flyoutRef

flyoutRef?: React.Ref<HTMLLIElement>;

property isHorizontal

isHorizontal?: boolean;

property navRef

navRef?: React.RefObject<HTMLElement | null>;

property onSelect

onSelect?: (
    event: React.FormEvent<HTMLInputElement>,
    groupId: number | string,
    itemId: number | string,
    to: string,
    preventDefault: boolean,
    onClick: NavSelectClickHandler
) => void;

property onToggle

onToggle?: (
    event: React.MouseEvent<HTMLButtonElement>,
    groupId: number | string,
    expanded: boolean
) => void;

property setFlyoutRef

setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;

property updateIsScrollable

updateIsScrollable?: (isScrollable: boolean) => void;

interface NavExpandableProps

interface NavExpandableProps
    extends Omit<
            React.DetailedHTMLProps<
                React.LiHTMLAttributes<HTMLLIElement>,
                HTMLLIElement
            >,
            'title'
        >,
        OUIAProps {}

property buttonProps

buttonProps?: any;

Additional props added to the NavExpandable

property children

children?: React.ReactNode;

Anything that can be rendered inside of the expandable list

property className

className?: string;

Additional classes added to the container

property groupId

groupId?: string | number;

Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component

property icon

icon?: React.ReactNode;

Icon added before the nav item children.

property id

id?: string;

Identifier to use for the section aria label

property isActive

isActive?: boolean;

If true makes the expandable list title active

property isExpanded

isExpanded?: boolean;

Boolean to pragmatically expand or collapse section

property onExpand

onExpand?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
    val: boolean
) => void;

allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property srText

srText?: string;

If defined, screen readers will read this text instead of the list title

property title

title: React.ReactNode;

Title content shown for the expandable list

interface NavGroupProps

interface NavGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Anything that can be rendered inside of the group

property className

className?: string;

Additional classes added to the container

property id

id?: string;

Identifier to use for the section aria label

property title

title?: string;

Title shown for the group

interface NavItemProps

interface NavItemProps
    extends Omit<React.HTMLProps<HTMLAnchorElement>, 'onClick'>,
        OUIAProps {}

property anchorRef

anchorRef?: React.Ref<HTMLAnchorElement>;

React ref for the anchor element within the nav item.

property children

children?: React.ReactNode;

Content rendered inside the nav item.

property className

className?: string;

Additional classes added to the nav item

property component

component?: React.ElementType<any> | React.ComponentType<any>;

Component used to render NavItems if React.isValidElement(children) is false

property flyout

flyout?: React.ReactElement<any>;

Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined.

property groupId

groupId?: string | number | null;

Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component

property icon

icon?: React.ReactNode;

Icon added before the nav item children.

property innerRef

innerRef?: React.Ref<HTMLLIElement>;

Forwarded ref

property isActive

isActive?: boolean;

Flag indicating whether the item is active

property itemId

itemId?: string | number | null;

Item identifier, will be returned with the onToggle and onSelect callback passed to the Nav component

property onClick

onClick?: NavSelectClickHandler;

Callback for item click

property onShowFlyout

onShowFlyout?: () => void;

Callback when flyout is opened or closed

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property preventDefault

preventDefault?: boolean;

If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.

property styleChildren

styleChildren?: boolean;

Whether to set className on children when React.isValidElement(children)

property to

to?: string;

Target navigation link. Should not be used if the flyout prop is defined.

property zIndex

zIndex?: number;

z-index of the flyout nav item

interface NavListProps

interface NavListProps
    extends React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLUListElement>,
        HTMLUListElement
    > {}

property backScrollAriaLabel

backScrollAriaLabel?: string;

Aria-label for the back scroll button

property children

children?: React.ReactNode;

Children nodes

property className

className?: string;

Additional classes added to the list

property forwardScrollAriaLabel

forwardScrollAriaLabel?: string;

Aria-label for the forward scroll button

interface NavProps

interface NavProps
    extends Omit<
            React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
            'onSelect' | 'onToggle'
        >,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the nav when there are multiple navs on the page

property children

children?: React.ReactNode;

Anything that can be rendered inside of the nav

property className

className?: string;

Additional classes added to the container

property isTextExpanded

isTextExpanded?: boolean;

Flag indicating the docked nav should display text. Only applies when variant is docked.
Modifiers
- @beta

property onSelect

onSelect?: (
    event: React.FormEvent<HTMLInputElement>,
    selectedItem: {
        groupId: number | string;
        itemId: number | string;
        to: string;
    }
) => void;

Callback for updating when item selection changes

property onToggle

onToggle?: (
    event: React.MouseEvent<HTMLButtonElement>,
    toggledItem: {
        groupId: number | string;
        isExpanded: boolean;
    }
) => void;

Callback for when a list is expanded or collapsed

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property variant

variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';

The nav variant to use. Docked is in beta.

interface NotificationBadgeProps

interface NotificationBadgeProps extends Omit<ButtonProps, 'variant'> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the notification badge.

property attentionIcon

attentionIcon?: React.ReactNode;

Icon to display for attention variant.

property children

children?: React.ReactNode;

Content rendered inside the notification badge.

property className

className?: string;

Additional classes added to the notification badge.

property count

count?: number;

A number displayed in the badge alongside the icon.

property icon

icon?: React.ReactNode;

Icon to display in the notification badge.

property isExpanded

isExpanded?: boolean;

Flag for applying expanded styling and setting the aria-expanded attribute on the notification badge.

property onAnimationEnd

onAnimationEnd?: (event: React.AnimationEvent<HTMLButtonElement>) => void;

Callback for when the animation of the notification badge icon ends.

property shouldNotify

shouldNotify?: boolean;

Flag indicating whether the notification badge animation should be triggered. Each time this prop is true, the animation will be triggered a single time.

property variant

variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention' | 'plain';

Determines the variant of the notification badge.

interface NotificationDrawerBodyProps

interface NotificationDrawerBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the body of the notification drawer

property className

className?: string;

Additional classes added to the notification drawer body

interface NotificationDrawerGroupListProps

interface NotificationDrawerGroupListProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the notification drawer list body

property className

className?: string;

Additional classes added to the notification drawer list body

interface NotificationDrawerGroupProps

interface NotificationDrawerGroupProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {}

property children

children?: React.ReactNode;

Content rendered inside the group

property className

className?: string;

Additional classes added to the group

property count

count: number;

Notification drawer group count

property headingLevel

headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

Sets the heading level to use for the group title. Default is h1.

property isExpanded

isExpanded: boolean;

Adds styling to the group to indicate expanded state

property isRead

isRead?: boolean;

Adds styling to the group to indicate whether it has been read

property onExpand

onExpand?: (event: any, value: boolean) => void;

Callback for when group button is clicked to expand

property title

title: React.ReactNode;

Notification drawer group title

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the tooltip which is displayed if text is truncated

property truncateTitle

truncateTitle?: number;

Truncate title to number of lines

interface NotificationDrawerHeaderProps

interface NotificationDrawerHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the drawer

property className

className?: string;

Additional classes for notification drawer header.

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Adds custom accessible text to the notification drawer close button.

property count

count?: number;

Notification drawer heading count

property customText

customText?: string;

Notification drawer heading custom text which can be used instead of providing count/unreadText

property onClose

onClose?: (event: KeyboardEvent | React.MouseEvent) => void;

Callback for when close button is clicked

property title

title?: string;

Notification drawer heading title

property unreadText

unreadText?: string;

Notification drawer heading unread text used in combination with a count

interface NotificationDrawerListItemBodyProps

interface NotificationDrawerListItemBodyProps
    extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the list item body

property className

className?: string;

Additional classes added to the list item body

property timestamp

timestamp?: React.ReactNode;

List item timestamp

interface NotificationDrawerListItemHeaderProps

interface NotificationDrawerListItemHeaderProps
    extends React.HTMLProps<HTMLDivElement> {}

property actionHasNoOffset

actionHasNoOffset?: boolean;

Removes the offset of the notification drawer actions.

property children

children?: React.ReactNode;

Actions rendered inside the notification drawer list item header

property className

className?: string;

Additional classes for notification drawer list item header.

property headingLevel

headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

Sets the heading level to use for the list item header title. Default is h2.

property icon

icon?: React.ReactNode;

Add custom icon for notification drawer list item header

property srTitle

srTitle?: string;

Notification drawer list item header screen reader title

property title

title: string;

Notification drawer list item title

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the tooltip which is displayed if text is truncated

property truncateTitle

truncateTitle?: number;

Truncate title to number of lines

property variant

variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';

Variant indicates the severity level

interface NotificationDrawerListItemProps

interface NotificationDrawerListItemProps extends React.HTMLProps<HTMLLIElement> {}

property children

children?: React.ReactNode;

Content rendered inside the list item

property className

className?: string;

Additional classes added to the list item

property isHoverable

isHoverable?: boolean;

Modifies the list item to include hover styles on :hover

property isRead

isRead?: boolean;

Adds styling to the list item to indicate it has been read

property onClick

onClick?: (event: any) => void;

Callback for when a list item is clicked

property readStateScreenReaderText

readStateScreenReaderText?: string;

Visually hidden text that conveys the current read state of the notification list item

property tabIndex

tabIndex?: number;

Tab index for the list item

property variant

variant?: 'custom' | 'success' | 'danger' | 'warning' | 'info';

Variant indicates the severity level

interface NotificationDrawerListProps

interface NotificationDrawerListProps extends React.HTMLProps<HTMLUListElement> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the notification drawer list.

property children

children?: React.ReactNode;

Content rendered inside the notification drawer list body

property className

className?: string;

Additional classes added to the notification drawer list body

property isHidden

isHidden?: boolean;

Adds styling to the notification drawer list to indicate expand/hide state

interface NotificationDrawerProps

interface NotificationDrawerProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the notification drawer

property className

className?: string;

Additional classes added to the notification drawer

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

interface NumberInputProps

interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Additional classes added to the number input

property inputAriaLabel

inputAriaLabel?: string;

Aria label of the input

property inputName

inputName?: string;

Name of the input

property inputProps

inputProps?: any;

Additional properties added to the text input

property isDisabled

isDisabled?: boolean;

Indicates the whole number input should be disabled

property max

max?: number;

Maximum value of the number input, disabling the plus button when reached

property min

min?: number;

Minimum value of the number input, disabling the minus button when reached

property minusBtnAriaLabel

minusBtnAriaLabel?: string;

Aria label of the minus button

property minusBtnProps

minusBtnProps?: ButtonProps;

Additional properties added to the minus button

property onBlur

onBlur?: (event?: any) => void;

Callback function when text input is blurred (focus leaves)

property onChange

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

Callback for the text input changing

property onMinus

onMinus?: (event: React.MouseEvent, name?: string) => void;

Callback for the minus button

property onPlus

onPlus?: (event: React.MouseEvent, name?: string) => void;

Callback for the plus button

property plusBtnAriaLabel

plusBtnAriaLabel?: string;

Aria label of the plus button

property plusBtnProps

plusBtnProps?: ButtonProps;

Additional properties added to the plus button

property unit

unit?: React.ReactNode;

Adds the given unit to the number input

property unitPosition

unitPosition?: 'before' | 'after';

Position of the number input unit in relation to the number input

property validated

validated?: 'default' | 'error' | 'warning' | 'success' | ValidatedOptions;

Value to indicate if the input is modified to show that validation state

property value

value?: number | '';

Value of the number input

property widthChars

widthChars?: number;

Sets the width of the number input to a number of characters

interface OUIAProps

interface OUIAProps {}

property ouiaId

ouiaId?: OuiaId;

property ouiaSafe

ouiaSafe?: boolean;

interface OverflowMenuContentProps

interface OverflowMenuContentProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: any;

Any elements that can be rendered in the menu

property className

className?: string;

Additional classes added to the OverflowMenuContent

property isPersistent

isPersistent?: boolean;

Modifies the overflow menu content visibility

interface OverflowMenuControlProps

interface OverflowMenuControlProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: any;

Any elements that can be rendered in the menu

property className

className?: string;

Additional classes added to the OverflowMenuControl

property hasAdditionalOptions

hasAdditionalOptions?: boolean;

Triggers the overflow dropdown to persist at all viewport sizes

interface OverflowMenuDropdownItemProps

interface OverflowMenuDropdownItemProps extends Omit<DropdownItemProps, 'ref'> {}

property isShared

isShared?: boolean;

Indicates when a dropdown item shows and hides the corresponding list item

property itemId

itemId?: string | number;

Identifies the component in the dropdown onSelect callback

interface OverflowMenuGroupProps

interface OverflowMenuGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: any;

Any elements that can be rendered in the menu

property className

className?: string;

Additional classes added to the OverflowMenuGroup

property groupType

groupType?: 'button' | 'icon';

Indicates a button or icon group

property isPersistent

isPersistent?: boolean;

Modifies the overflow menu group visibility

interface OverflowMenuItemProps

interface OverflowMenuItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: any;

Any elements that can be rendered in the menu

property className

className?: string;

Additional classes added to the OverflowMenuItem

property isPersistent

isPersistent?: boolean;

Modifies the overflow menu item visibility

interface OverflowMenuProps

interface OverflowMenuProps extends React.HTMLProps<HTMLDivElement> {}

property breakpoint

breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl';

Indicates breakpoint at which to switch between expanded and collapsed states. The "sm" breakpoint does not apply to vertical overflow menus.

property breakpointReference

breakpointReference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;

A container reference to base the specified breakpoint on instead of the viewport width.

property children

children?: any;

Any elements that can be rendered in the menu

property className

className?: string;

Additional classes added to the OverflowMenu.

property isVertical

isVertical?: boolean;

Indicates the overflow menu orientation is vertical and should respond to height changes instead of width.

interface OverflowMenuState

interface OverflowMenuState extends React.HTMLProps<HTMLDivElement> {}

property breakpointRef

breakpointRef: HTMLElement;

property isBelowBreakpoint

isBelowBreakpoint: boolean;

interface PageBodyProps

interface PageBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the section

property className

className?: string;

Additional classes added to the section

interface PageBreadcrumbProps

interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true.

property children

children?: React.ReactNode;

Content rendered inside of the PageBreadcrumb

property className

className?: string;

Additional classes to apply to the PageBreadcrumb

property hasBodyWrapper

hasBodyWrapper?: boolean;

Flag indicating whether children passed to the component should be wrapped by a PageBody. Set this to false in order to pass multiple, custom PageBody's as children.
Modifiers
- @beta

property hasOverflowScroll

hasOverflowScroll?: boolean;

Flag indicating if the PageBreadcrumb has a scrolling overflow

property hasShadowBottom

hasShadowBottom?: boolean;

Flag indicating if PageBreadcrumb should have a shadow at the bottom

property hasShadowTop

hasShadowTop?: boolean;

Flag indicating if PageBreadcrumb should have a shadow at the top

property isWidthLimited

isWidthLimited?: boolean;

Limits the width of the breadcrumb

property stickyOnBreakpoint

stickyOnBreakpoint?: {
    default?: 'top' | 'bottom';
    sm?: 'top' | 'bottom';
    md?: 'top' | 'bottom';
    lg?: 'top' | 'bottom';
    xl?: 'top' | 'bottom';
    '2xl'?: 'top' | 'bottom';
};

Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints

interface PageContextProps

interface PageContextProps {}

property getBreakpoint

getBreakpoint: (
    width: number | null
) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

property getVerticalBreakpoint

getVerticalBreakpoint: (
    height: number | null
) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

property height

height: number;

property isManagedSidebar

isManagedSidebar: boolean;

property isMobile

isMobile: boolean;

property isSidebarOpen

isSidebarOpen: boolean;

property onSidebarToggle

onSidebarToggle: () => void;

property width

width: number;

interface PageGroupProps

interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the page group when the hasOverflowScroll prop is set to true.

property children

children?: React.ReactNode;

Content rendered inside of the PageGroup

property className

className?: string;

Additional classes to apply to the PageGroup

property hasOverflowScroll

hasOverflowScroll?: boolean;

Flag indicating if the PageGroup has a scrolling overflow

property hasShadowBottom

hasShadowBottom?: boolean;

Modifier indicating if PageGroup should have a shadow at the bottom

property hasShadowTop

hasShadowTop?: boolean;

Modifier indicating if PageGroup should have a shadow at the top

property isFilled

isFilled?: boolean;

Enables the page group to fill the available vertical space if true, or disable filling if false.

property isNoPlainOnGlass

isNoPlainOnGlass?: boolean;

Prevents the page group from automatically applying plain styling when glass theme is enabled.
Modifiers
- @beta

property isPlain

isPlain?: boolean;

Adds plain styling to the page group.

property isStickyStuck

isStickyStuck?: boolean;

Flag indicating if the group has stuck styling, applied when the group is not at the edge of the scroll parent container.
Modifiers
- @beta

property stickyBase

stickyBase?: 'top' | 'bottom';

Applies the base sticky positioning to the top or bottom of the scroll parent container.
Modifiers
- @beta

property stickyOnBreakpoint

stickyOnBreakpoint?: {
    default?: 'top' | 'bottom';
    sm?: 'top' | 'bottom';
    md?: 'top' | 'bottom';
    lg?: 'top' | 'bottom';
    xl?: 'top' | 'bottom';
    '2xl'?: 'top' | 'bottom';
};

Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints

interface PageProps

interface PageProps extends React.HTMLProps<HTMLDivElement> {}

property additionalGroupedContent

additionalGroupedContent?: React.ReactNode;

Additional content of the group

banner?: React.ReactNode;

Banner component for the page. This will be rendered above a breadcrumb if one is also passed.

breadcrumb?: React.ReactNode;

Breadcrumb component for the page

property breadcrumbProps

breadcrumbProps?: PageBreadcrumbProps;

Additional props of the breadcrumb

property children

children?: React.ReactNode;

Content rendered inside the main section of the page layout (e.g. )

property className

className?: string;

Additional classes added to the page layout

property defaultManagedSidebarIsOpen

defaultManagedSidebarIsOpen?: boolean;

If true, the managed sidebar is initially open for desktop view

property dockContent

dockContent?: React.ReactNode;

Content to render in the vertical dock when variant of docked is used. At mobile viewports, this content will be replaced with the content passed to masthead.
Modifiers
- @beta

property drawerDefaultSize

drawerDefaultSize?: string;

Sets default drawer size

property drawerMaxSize

drawerMaxSize?: string;

Sets the maximum drawer size

property drawerMinSize

drawerMinSize?: string;

Sets the minimum drawer size

property getBreakpoint

getBreakpoint?: (
    width: number | null
) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class You can override the default getBreakpoint function to return breakpoints at different sizes than the default You can view the default getBreakpoint function here: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts

property getVerticalBreakpoint

getVerticalBreakpoint?: (
    height: number | null
) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class You can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default You can view the default getVerticalBreakpoint function here: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts

property groupProps

groupProps?: PageGroupProps;

Additional props of the group

property horizontalSubnav

horizontalSubnav?: React.ReactNode;

Horizontal sub navigation component for the page

property isBreadcrumbGrouped

isBreadcrumbGrouped?: boolean;

Flag indicating if the breadcrumb should be in a group

property isBreadcrumbWidthLimited

isBreadcrumbWidthLimited?: boolean;

Flag indicating if breadcrumb width should be limited

property isContentFilled

isContentFilled?: boolean;

Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property.

property isDockExpanded

isDockExpanded?: boolean;

Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked.
Modifiers
- @beta

property isDockTextExpanded

isDockTextExpanded?: boolean;

Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and will handle toggling the visibility of the text in individual isDocked components.
Modifiers
- @beta

property isHorizontalSubnavGrouped

isHorizontalSubnavGrouped?: boolean;

Flag indicating if the horizontal sub navigation should be in a group

property isHorizontalSubnavWidthLimited

isHorizontalSubnavWidthLimited?: boolean;

Flag indicating if horizontal sub navigation width should be limited

property isManagedSidebar

isManagedSidebar?: boolean;

If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into the sidebar component or add a callback onSidebarToggle function into the Masthead component

property isNotificationDrawerExpanded

isNotificationDrawerExpanded?: boolean;

Flag indicating Notification drawer in expanded

property mainAriaLabel

mainAriaLabel?: string;

Accessible label, can be used to name main section

property mainComponent

mainComponent?: 'main' | 'div';

HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists.

property mainContainerId

mainContainerId?: string;

an id to use for the [role="main"] element

property mainTabIndex

mainTabIndex?: number | null;

tabIndex to use for the [role="main"] element, null to unset it

masthead?: React.ReactNode;

The horizontal masthead content (e.g. ). When using the docked variant, this content will only render at mobile viewports.

property notificationDrawer

notificationDrawer?: React.ReactNode;

Notification drawer component for an optional notification drawer (e.g. )

property onNotificationDrawerExpand

onNotificationDrawerExpand?: (
    event: KeyboardEvent | React.MouseEvent | React.TransitionEvent
) => void;

Callback when notification drawer panel is finished expanding.

property onPageResize

onPageResize?:
    | ((
          event: MouseEvent | TouchEvent | React.KeyboardEvent,
          object: any
      ) => void)
    | null;

Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px Returns object { mobileView: boolean, windowSize: number }

property role

role?: string;

Sets the value for role on the element

sidebar?: React.ReactNode;

Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout will render without a sidebar.

property skipToContent

skipToContent?: React.ReactElement<any>;

Skip to content component for the page

property variant

variant?: 'default' | 'docked';

Indicates the layout variant
Modifiers
- @beta

interface PageSectionProps

interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true. This prop should also be passed in if a heading is not being used to describe the content of the page section.

property children

children?: React.ReactNode;

Content rendered inside the section

property className

className?: string;

Additional classes added to the section

property component

component?: keyof React.JSX.IntrinsicElements;

Sets the base component to render. Defaults to section

property hasBodyWrapper

hasBodyWrapper?: boolean;

Flag indicating whether children passed to the component should be wrapped by a PageBody. Set this to false in order to pass multiple, custom PageBody's as children.
Modifiers
- @beta

property hasOverflowScroll

hasOverflowScroll?: boolean;

Flag indicating if the PageSection has a scrolling overflow

property hasShadowBottom

hasShadowBottom?: boolean;

Modifier indicating if PageSection should have a shadow at the bottom

property hasShadowTop

hasShadowTop?: boolean;

Modifier indicating if PageSection should have a shadow at the top

property isCenterAligned

isCenterAligned?: boolean;

Flag indicating if the section content is center aligned. isWidthLimited must be set for this to work

property isFilled

isFilled?: boolean;

Enables the page section to fill the available vertical space if true, or disable filling if false.

property isNoPlainOnGlass

isNoPlainOnGlass?: boolean;

Prevents the page section from automatically applying plain styling when glass theme is enabled.
Modifiers
- @beta

property isPlain

isPlain?: boolean;

Adds plain styling to the page section.

property isStickyStuck

isStickyStuck?: boolean;

Flag indicating if the section has stuck styling, applied when the section is not at the edge of the scroll parent container.
Modifiers
- @beta

property isWidthLimited

isWidthLimited?: boolean;

Limits the width of the section

property padding

padding?: {
    default?: 'padding' | 'noPadding';
    sm?: 'padding' | 'noPadding';
    md?: 'padding' | 'noPadding';
    lg?: 'padding' | 'noPadding';
    xl?: 'padding' | 'noPadding';
    '2xl'?: 'padding' | 'noPadding';
};

Padding at various breakpoints.

property stickyBase

stickyBase?: 'top' | 'bottom';

Applies the base sticky positioning to the top or bottom of the scroll parent container.
Modifiers
- @beta

property stickyOnBreakpoint

stickyOnBreakpoint?: {
    default?: 'top' | 'bottom';
    sm?: 'top' | 'bottom';
    md?: 'top' | 'bottom';
    lg?: 'top' | 'bottom';
    xl?: 'top' | 'bottom';
    '2xl'?: 'top' | 'bottom';
};

Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints

property type

type?: 'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';

Section type variant

property variant

variant?: 'default' | 'secondary';

Section background color variant. This will only apply when the type prop has the "default" value.

interface PageSidebarBodyProps

interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the page sidebar body

property className

className?: string;

Additional classes added to the page sidebar body

property isContextSelector

isContextSelector?: boolean;

Flag indicating that the page sidebar body is for a context selector/perspective switcher

property isFilled

isFilled?: boolean;

Flag indicating that the page sidebar body should fill the available vertical space.

property usePageInsets

usePageInsets?: boolean;

Flag indicating that the page sidebar body should use page insets.

interface PageSidebarContextProps

interface PageSidebarContextProps {}

property isSidebarOpen

isSidebarOpen: boolean;

interface PageSidebarProps

interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the page sidebar (e.g.

property className

className?: string;

Additional classes added to the page sidebar

property id

id?: string;

Sidebar id

property isManagedSidebar

isManagedSidebar?: boolean;

If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into the sidebar component or add a callback onSidebarToggle function into the Masthead component

property isSidebarOpen

isSidebarOpen?: boolean;

Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed

interface PageState

interface PageState {}

property desktopIsSidebarOpen

desktopIsSidebarOpen: boolean;

property height

height: number;

property mobileIsSidebarOpen

mobileIsSidebarOpen: boolean;

property mobileView

mobileView: boolean;

property width

width: number;

interface PageToggleButtonProps

interface PageToggleButtonProps extends ButtonProps {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the toggle button.

property children

children?: React.ReactNode;

Content of the page toggle button

property hamburgerVariant

hamburgerVariant?: 'expand' | 'collapse';

IsHamburgerButton must be true for hamburgerVariant to be have an effect. Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button.

property id

id?: string;

Button id

property isHamburgerButton

isHamburgerButton?: boolean;

Flag indicating whether the hamburger button variation with animations should be used.

property isSidebarOpen

isSidebarOpen?: boolean;

True if the sidebar is shown

property onSidebarToggle

onSidebarToggle?: () => void;

Callback function to handle the sidebar toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true

interface PaginationProps

interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {}

The main pagination component.

property children

children?: React.ReactNode;

What should be rendered inside the pagination.

property className

className?: string;

Additional classes for the pagination container.

property dropDirection

dropDirection?: 'up' | 'down';

Direction of dropdown context menu.

property firstPage

firstPage?: number;

Page to start at.

property inset

inset?: {
    default?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    sm?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    md?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    lg?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    xl?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    '2xl'?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
};

Insets at various breakpoints.

property isCompact

isCompact?: boolean;

Flag indicating if pagination is compact.

property isDisabled

isDisabled?: boolean;

Flag indicating if pagination is disabled.

property isLastFullPageShown

isLastFullPageShown?: boolean;

Indicate whether to show last full page of results when user selects perPage value greater than remaining rows.

property isStatic

isStatic?: boolean;

Flag indicating if pagination should not be sticky on mobile.

property isSticky

isSticky?: boolean;

Flag indicating if pagination should stick to its position (based on variant). For dynamic sticky control, use isStickyBase and isStickyStuck instead.

property isStickyBase

isStickyBase?: boolean;

Flag indicating the pagination should have sticky positioning relative to its container.
Modifiers
- @beta

property isStickyStuck

isStickyStuck?: boolean;

Flag indicating the pagination should have stuck styling, when the pagination is not at the top (for top variant) or bottom (for bottom variant) of the scroll container.
Modifiers
- @beta

property itemCount

itemCount?: number;

Total number of items.

property itemsEnd

itemsEnd?: number;

Last index of items on current page.

property itemsStart

itemsStart?: number;

First index of items on current page.

property menuAppendTo

menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline';

The container to append the pagination options menu to.
Modifiers
- @beta

property offset

offset?: number;

Start index of rows to display, used in place of providing page.

property onFirstClick

onFirstClick?: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    page: number
) => void;

Function called when user clicks on navigate to first page.

property onLastClick

onLastClick?: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    page: number
) => void;

Function called when user clicks on navigate to last page.

property onNextClick

onNextClick?: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    page: number
) => void;

Function called when user clicks on navigate to next page.

property onPageInput

onPageInput?: (
    event: React.KeyboardEvent<HTMLInputElement>,
    page: number
) => void;

Function called when user inputs page number.

property onPerPageSelect

onPerPageSelect?: OnPerPageSelect;

Function called when user selects number of items per page.

property onPreviousClick

onPreviousClick?: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    page: number
) => void;

Function called when user clicks on navigate to previous page.

property onSetPage

onSetPage?: OnSetPage;

Function called when user sets page.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property page

page?: number;

Current page number.

property perPage

perPage?: number;

Number of items per page.

property perPageOptions

perPageOptions?: PerPageOptions[];

Array of the number of items per page options.

property titles

titles?: PaginationTitles;

Object with titles to display in pagination.

property toggleTemplate

toggleTemplate?:
    | ((props: PaginationToggleTemplateProps) => React.ReactElement<any>)
    | string;

This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, and/or ofWord props.

property usePageInsets

usePageInsets?: boolean;

Flag indicating that pagination should use page insets.

property variant

variant?: 'top' | 'bottom' | PaginationVariant;

Position where pagination is rendered.

property widgetId

widgetId?: string;

Id to identify widget on page.

interface PaginationTitles

interface PaginationTitles {}

Properties to customize various pagination titles. The following properties should be passed into the pagination component's title property.

property currPageAriaLabel

currPageAriaLabel?: string;

Accessible label for the input displaying the current page.

property items

items?: string;

The type or title of the items being paginated.

property itemsPerPage

itemsPerPage?: string;

The title of the pagination options menu.

property ofWord

ofWord?: string;

Label for the English word "of".

property optionsToggleAriaLabel

optionsToggleAriaLabel?: string;

Accessible label for the options toggle.

property page

page?: string;

The title of a page displayed beside the page number.

property pages

pages?: string;

The title of a page displayed beside the page number (plural form).

property paginationAriaLabel

paginationAriaLabel?: string;

Accessible label for the pagination component.

property perPageSuffix

perPageSuffix?: string;

The suffix to be displayed after each option on the options menu dropdown.

property toFirstPageAriaLabel

toFirstPageAriaLabel?: string;

Accessible label for the button which moves to the first page.

property toLastPageAriaLabel

toLastPageAriaLabel?: string;

Accessible label for the button which moves to the last page.

property toNextPageAriaLabel

toNextPageAriaLabel?: string;

Accessible label for the button which moves to the next page.

property toPreviousPageAriaLabel

toPreviousPageAriaLabel?: string;

Accessible label for the button which moves to the previous page.

interface PaginationToggleTemplateProps

interface PaginationToggleTemplateProps {}

Allows more customization of the pagination dropdown toggle. The following properties should be passed into the pagination component's toggleTemplate property.

property firstIndex

firstIndex?: number;

The first index of the items being paginated

property itemCount

itemCount?: number;

The total number of items being paginated

property itemsTitle

itemsTitle?: string;

The type or title of the items being paginated

property lastIndex

lastIndex?: number;

The last index of the items being paginated

property ofWord

ofWord?: React.ReactNode;

The word that joins the index and itemCount/itemsTitle

interface PanelFooterProps

interface PanelFooterProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the panel footer

property className

className?: string;

Class to add to outer div

interface PanelHeaderProps

interface PanelHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the panel header

property className

className?: string;

Class to add to outer div

interface PanelMainBodyProps

interface PanelMainBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the panel main body div

property className

className?: string;

Class to add to outer div

interface PanelMainProps

interface PanelMainProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the panel main div

property className

className?: string;

Class to add to outer div

property maxHeight

maxHeight?: string;

Max height of the panel main div as a string with the value and unit

interface PanelProps

interface PanelProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the panel

property className

className?: string;

Class to add to outer div

property hasNoBorder

hasNoBorder?: boolean;

Flag to remove the panel's border
Modifiers
- @beta

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property isAutoHeight

isAutoHeight?: boolean;

When used with a scrollable panel, sets the panel to auto height
Modifiers
- @beta

property isFullHeight

isFullHeight?: boolean;

Flag to make the panel fill the available height of its container
Modifiers
- @beta

property isGlass

isGlass?: boolean;

Modifies the panel to use glass styling when the glass theme is enabled
Modifiers
- @beta

property isPill

isPill?: boolean;

Uses pill (fully rounded) border radius for the panel
Modifiers
- @beta

property isScrollable

isScrollable?: boolean;

Flag to add scrollable styling to the panel

property variant

variant?: 'raised' | 'bordered' | 'secondary';

Adds panel variant styles

interface PerPageOptions

interface PerPageOptions {}

Properties to customize the content and behavior of the pagination dropdown options. These properties should be passed into the pagination component's perPageOptions property.

property title

title?: string;

The text title of the option, which is rendered inside the pagination dropdown menu.

property value

value?: number;

The value of the option, which determines how many items are displayed per page.

interface PopoverProps

interface PopoverProps {}

The main popover component. The following properties can also be passed into another component that has a property specifically for passing in popover properties.

property 'aria-label'

'aria-label'?: string;

Accessible label for the popover, required when header is not present.

property alertSeverityScreenReaderText

alertSeverityScreenReaderText?: string;

Text announced by screen reader when alert severity variant is set to indicate severity level.

property alertSeverityVariant

alertSeverityVariant?: 'custom' | 'info' | 'warning' | 'success' | 'danger';

Severity variants for an alert popover. This modifies the color of the header to match the severity.

property animationDuration

animationDuration?: number;

The duration of the CSS fade transition animation.

property appendTo

appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';

The element to append the popover to. Defaults to "inline".

property bodyContent

bodyContent: React.ReactNode | ((hide: () => void) => React.ReactNode);

Body content of the popover. If you want to close the popover after an action within the body content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. bodyContent={hide => <Button onClick={() => hide()}>Close}

property children

children?: ReactElement<any>;

The trigger reference element to which the popover is relatively placed to. If you cannot wrap the element with the Popover, you can use the triggerRef prop instead. Usage: Reference

property className

className?: string;

Additional classes added to the popover.

property closeBtnAriaLabel

closeBtnAriaLabel?: string;

Accessible label for the close button.

property distance

distance?: number;

Distance of the popover to its target. Defaults to 25.

property elementToFocus

elementToFocus?: HTMLElement | SVGElement | string;

The element to focus when the popover becomes visible. By default the first focusable element will receive focus.

property enableFlip

enableFlip?: boolean;

If true, tries to keep the popover in view by flipping it if necessary. If the position is set to 'auto', this prop is ignored.

property flipBehavior

flipBehavior?:
    | 'flip'
    | (
          | 'top'
          | 'bottom'
          | 'left'
          | 'right'
          | 'top-start'
          | 'top-end'
          | 'bottom-start'
          | 'bottom-end'
          | 'left-start'
          | 'left-end'
          | 'right-start'
          | 'right-end'
      )[];

The desired position to flip the popover to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the popover on the left.

property footerContent

footerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);

Footer content of the popover. If you want to close the popover after an action within the footer content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. footerContent={hide => <Button onClick={() => hide()}>Close}

property hasAutoWidth

hasAutoWidth?: boolean;

Removes fixed-width and allows width to be defined by contents.

property hasNoPadding

hasNoPadding?: boolean;

Allows content to touch edges of popover container.

property headerComponent

headerComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

Sets the heading level to use for the popover header. Defaults to h6.

property headerContent

headerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);

Simple header content to be placed within a title. If you want to close the popover after an action within the header content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close}

property headerIcon

headerIcon?: React.ReactNode;

Icon to be displayed in the popover header. *

property hideOnOutsideClick

hideOnOutsideClick?: boolean;

Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user).

property id

id?: string;

Id used as part of the various popover elements (popover-${id}-header/body/footer).

property isVisible

isVisible?: boolean;

True to show the popover programmatically. Used in conjunction with the shouldClose prop. By default, the popover child element handles click events automatically. If you want to control this programmatically, the popover will not auto-close if the close button is clicked, the escape key is used, or if a click occurs outside the popover. Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.

property maxWidth

maxWidth?: string;

Maximum width of the popover (default 18.75rem).

property minWidth

minWidth?: string;

Minimum width of the popover (default 6.25rem).

property onHidden

onHidden?: () => void;

Lifecycle function invoked when the popover has fully transitioned out.

property onHide

onHide?: (event: MouseEvent | KeyboardEvent) => void;

Lifecycle function invoked when the popover begins to transition out.

property onMount

onMount?: () => void;

Lifecycle function invoked when the popover has been mounted to the DOM.

property onShow

onShow?: (event: MouseEvent | KeyboardEvent) => void;

Lifecycle function invoked when the popover begins to transition in.

property onShown

onShown?: () => void;

Lifecycle function invoked when the popover has fully transitioned in.

property position

position?:
    | PopoverPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Popover position. Note: With the enableFlip property set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior property.

property shouldClose

shouldClose?: (
    event: MouseEvent | KeyboardEvent,
    hideFunction?: () => void
) => void;

Callback function that is only invoked when isVisible is also controlled. Called when the popover close button is clicked, the enter key was used on it, or the escape key is used.

property shouldOpen

shouldOpen?: (
    event: MouseEvent | KeyboardEvent,
    showFunction?: () => void
) => void;

Callback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.

property showClose

showClose?: boolean;

Flag indicating whether the close button should be shown.

property triggerAction

triggerAction?: 'click' | 'hover';

Deprecated
Sets an interaction to open popover, defaults to "click"

property triggerRef

triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;

The trigger reference element to which the popover is relatively placed to. If you can wrap the element with the popover, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />

property withFocusTrap

withFocusTrap?: boolean;

Whether to trap focus in the popover. When using a triggerAction of "hover", this will be set to false by default and must remain false.

property zIndex

zIndex?: number;

The z-index of the popover.

interface PopperOptions

interface PopperOptions {}

Properties of Popper that can be used to customize its behavior.

property animationDuration

animationDuration?: number;

The duration of the CSS fade transition animation.

property appendTo

appendTo?: HTMLElement | (() => HTMLElement) | 'inline';

The container to append the popper to. Defaults to 'inline'.

property direction

direction?: 'up' | 'down';

popper direction

property distance

distance?: number;

Distance of the popper to the trigger

property enableFlip

enableFlip?: boolean;

Enable to flip the popper when it reaches the boundary

property entryDelay

entryDelay?: number;

Delay in ms before the popper appears

property exitDelay

exitDelay?: number;

Delay in ms before the popper disappears

property flipBehavior

flipBehavior?:
    | 'flip'
    | (
          | 'top'
          | 'bottom'
          | 'left'
          | 'right'
          | 'top-start'
          | 'top-end'
          | 'bottom-start'
          | 'bottom-end'
          | 'left-start'
          | 'left-end'
          | 'right-start'
          | 'right-end'
      )[];

The behavior of how the popper flips when it reaches the boundary

property maxWidth

maxWidth?: string | 'trigger';

Maximum width of the popper. If the value is "trigger", it will set the max width to the trigger element's width

property minWidth

minWidth?: string | 'trigger';

Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width

property offset

offset?: OffsetOptions['offset'];

Override for the popper's offset

property onBlur

onBlur?: (event?: FocusEvent) => void;

Callback function when trigger is blurred (focus leaves)

property onDocumentClick

onDocumentClick?: (
    event?: MouseEvent,
    triggerElement?: HTMLElement,
    popperElement?: HTMLElement
) => void;

Callback function when document is clicked

property onDocumentKeyDown

onDocumentKeyDown?: (event?: KeyboardEvent) => void;

Callback function when keydown event occurs on document

property onFocus

onFocus?: (event?: FocusEvent) => void;

Callback function when trigger is focused

property onHidden

onHidden?: () => void;

Callback when popper's hide transition has finished executing

property onHide

onHide?: () => void;

Lifecycle function invoked when the popper begins to transition out.

property onMount

onMount?: () => void;

Lifecycle function invoked when the popper has been mounted to the DOM.

property onMouseEnter

onMouseEnter?: (event?: MouseEvent) => void;

Callback function when mouse enters trigger

property onMouseLeave

onMouseLeave?: (event?: MouseEvent) => void;

Callback function when mouse leaves trigger

property onPopperClick

onPopperClick?: (event?: MouseEvent) => void;

Callback function when popper is clicked

property onPopperMouseEnter

onPopperMouseEnter?: (event?: MouseEvent) => void;

Callback function when mouse enters popper content

property onPopperMouseLeave

onPopperMouseLeave?: (event?: MouseEvent) => void;

Callback function when mouse leaves popper content

property onShow

onShow?: () => void;

Lifecycle function invoked when the popper begins to transition in.

property onShown

onShown?: () => void;

Lifecycle function invoked when the popper has fully transitioned in.

property onTriggerClick

onTriggerClick?: (event?: MouseEvent) => void;

Callback function when trigger is clicked

property onTriggerEnter

onTriggerEnter?: (event?: KeyboardEvent) => void;

Callback function when Enter key is used on trigger

property placement

placement?: Placement;

Instead of direction and position can set the placement of the popper

property position

position?: 'right' | 'left' | 'center' | 'start' | 'end';

Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping.

property positionModifiers

positionModifiers?: {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
    topStart?: string;
    topEnd?: string;
    bottomStart?: string;
    bottomEnd?: string;
    leftStart?: string;
    leftEnd?: string;
    rightStart?: string;
    rightEnd?: string;
};

Map class names to positions, for example: { top: styles.modifiers.top, bottom: styles.modifiers.bottom, left: styles.modifiers.left, right: styles.modifiers.right }

property preventOverflow

preventOverflow?: boolean;

Flag to prevent the popper from overflowing its container and becoming partially obscured.

property width

width?: string | 'trigger';

Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width

property zIndex

zIndex?: number;

z-index of the popper element

interface PopperProps

interface PopperProps extends PopperOptions {}

Extends PopperOptions

property isVisible

isVisible?: boolean;

True to make the popper visible

property popper

popper: React.ReactElement<any>;

The popper (menu/tooltip/popover) element

property popperRef

popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;

Reference to the popper (menu/tooltip/popover) element. Passing this prop will remove the wrapper div element from the popper.

property trigger

trigger?: React.ReactNode;

Trigger reference element to which the popper is relatively placed to.

property triggerRef

triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;

A reference to the trigger reference element that can be passed instead of or along with the trigger prop. When passed along with the trigger prop, the div element that wraps the trigger will be removed.

interface ProgressBarProps

interface ProgressBarProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

What should be rendered inside progress bar.

property className

className?: string;

Additional classes for Progres bar.

property progressBarAriaProps

progressBarAriaProps?: AriaProps;

Minimal value of progress.

property value

value: number;

Actual progress value.

interface ProgressContainerProps

interface ProgressContainerProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'title'> {}

property helperText

helperText?: React.ReactNode;

Content which can be used to convey additional information about the progress component. We recommend the helper text component as it was designed for this purpose.

property hideStatusIcon

hideStatusIcon?: boolean;

Hide the status icon, helpful when space is limited (such as within table cells)

property isTitleTruncated

isTitleTruncated?: boolean;

Whether string title should be truncated

property label

label?: React.ReactNode;

Label to indicate what progress is showing.

property measureLocation

measureLocation?: 'outside' | 'inside' | 'top' | 'none';

Location of progress value.

property parentId

parentId: string;

Progress component DOM ID.

property progressBarAriaProps

progressBarAriaProps?: AriaProps;

Properties needed for aria support

property title

title?: React.ReactNode;

Progress title. The isTitleTruncated property will only affect string titles. Node title truncation must be handled manually.

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Position of the tooltip which is displayed if title is truncated

property value

value: number;

Actual progress value.

property variant

variant?: 'danger' | 'success' | 'warning';

Type of progress status.

interface ProgressProps

interface ProgressProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'> {}

property 'aria-describedby'

'aria-describedby'?: string;

Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in.

property 'aria-label'

'aria-label'?: string;

Adds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar

property 'aria-labelledby'

'aria-labelledby'?: string;

Associates the ProgressBar with it's label for accessibility purposes. Required when title not used

property className

className?: string;

Classname for progress component.

property helperText

helperText?: React.ReactNode;

Content which can be used to convey additional information about the progress component. We recommend the helper text component as it was designed for this purpose.

property hideStatusIcon

hideStatusIcon?: boolean;

Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure.

property id

id?: string;

DOM id for progress component.

property isTitleTruncated

isTitleTruncated?: boolean;

Indicate whether to truncate the string title

property label

label?: React.ReactNode;

Text description of current progress value to display instead of percentage.

property max

max?: number;

Maximum value of progress.

property measureLocation

measureLocation?: 'outside' | 'inside' | 'top' | 'none';

Where the measure percent will be located.

property min

min?: number;

Minimal value of progress.

property size

size?: 'sm' | 'md' | 'lg';

Size variant of progress.

property title

title?: React.ReactNode;

Title above progress. The isTitleTruncated property will only affect string titles. Node title truncation must be handled manually.

property tooltipPosition

tooltipPosition?: 'auto' | 'top' | 'bottom' | 'left' | 'right';

Position of the tooltip which is displayed if title is truncated

property value

value?: number;

Actual value of progress.

property valueText

valueText?: string;

Accessible text description of current progress value, for when value is not a percentage. Use with label.

property variant

variant?: 'danger' | 'success' | 'warning';

Status variant of progress.

interface ProgressStepperProps

interface ProgressStepperProps
    extends React.DetailedHTMLProps<
        React.OlHTMLAttributes<HTMLOListElement>,
        HTMLOListElement
    > {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible label to the progress stepper.

property children

children?: React.ReactNode;

Content rendered inside the progress stepper.

property className

className?: string;

Additional classes applied to the progress stepper container.

property isCenterAligned

isCenterAligned?: boolean;

Flag indicating the progress stepper should be centered.

property isCompact

isCompact?: boolean;

Flag indicating the progress stepper should be rendered compactly.

property isVertical

isVertical?: boolean;

Flag indicating the progress stepper has a vertical layout.

interface ProgressStepProps

interface ProgressStepProps
    extends React.DetailedHTMLProps<
        React.LiHTMLAttributes<HTMLLIElement>,
        HTMLLIElement
    > {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the progress step. Should communicate all information being communicated by the progress step's icon, including the variant and the completed status.

property children

children?: React.ReactNode;

Content rendered inside the progress step.

property className

className?: string;

Additional classes applied to the progress step container.

property description

description?: React.ReactNode;

Description text of a progress step.

property icon

icon?: React.ReactNode;

Custom icon of a progress step. Will override default icons provided by the variant.

property isCurrent

isCurrent?: boolean;

Flag indicating the progress step is the current step.

property popoverRender

popoverRender?: (stepRef: React.RefObject<any>) => React.ReactNode;

Forwards the step ref to rendered function. Use this prop to add a popover to the step.

property titleId

titleId?: string;

ID of the title of the progress step.

property variant

variant?: 'default' | 'success' | 'info' | 'pending' | 'warning' | 'danger';

Variant of the progress step. Each variant has a default icon.

interface RadioProps

interface RadioProps
    extends Omit<
            React.HTMLProps<HTMLInputElement>,
            'disabled' | 'label' | 'onChange' | 'type'
        >,
        OUIAProps {}

property 'aria-describedby'

'aria-describedby'?: string;

Custom aria-describedby value for the radio input. If not provided and description is set, a unique ID will be generated automatically.

property 'aria-label'

'aria-label'?: string;

Aria label for the radio.

property body

body?: React.ReactNode;

Body of the radio.

property checked

checked?: boolean;

Flag to show if the radio is checked.

property className

className?: string;

Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop.

property component

component?: React.ElementType;

Sets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified.

property description

description?: React.ReactNode;

Description text of the radio.

property id

id: string;

Id of the radio.

property inputClassName

inputClassName?: string;

Additional classes added to the radio input.

property isChecked

isChecked?: boolean;

Flag to show if the radio is checked.

property isDisabled

isDisabled?: boolean;

Flag to show if the radio is disabled.

property isLabelWrapped

isLabelWrapped?: boolean;

Flag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a "label") is specified.

property isValid

isValid?: boolean;

Flag to show if the radio selection is valid or invalid.

property label

label?: React.ReactNode;

Label text of the radio.

property labelPosition

labelPosition?: 'start' | 'end';

Sets the position of the label. Defaults to 'end' (after the radio input).

property name

name: string;

Name for group of radios

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;

A callback for when the radio selection changes.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface SearchInputExpandable

interface SearchInputExpandable {}

Properties for creating an expandable search input. These properties should be passed into the search input component's expandableInput property.

property hasAnimations

hasAnimations?: boolean;

Flag indicating animations should be enabled when the search input expands and collapses. Note: this will change the component's DOM structure. In a future breaking change release, this will become the default behavior and will no longer be needed.

property isExpanded

isExpanded: boolean;

Flag to indicate if the search input is expanded.

property onToggleExpand

onToggleExpand: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    isExpanded: boolean
) => void;

Callback function to toggle the expandable search input.

property toggleAriaLabel

toggleAriaLabel: string;

An accessible label for the expandable search input toggle.

interface SearchInputProps

interface SearchInputProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref'> {}

The main search input component.

property 'aria-label'

'aria-label'?: string;

An accessible label for the search input.

property advancedSearchDelimiter

advancedSearchDelimiter?: string;

Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.

property appendTo

appendTo?: HTMLElement | (() => HTMLElement) | 'inline';

The container to append the menu to. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo={() => document.body} appendTo={document.getElementById('target')}

property areUtilitiesDisplayed

areUtilitiesDisplayed?: boolean;

Flag to indicate utilities should be displayed. By default if this prop is undefined or false, utilities will only be displayed when the search input has a value.

property attributes

attributes?: string[] | SearchInputSearchAttribute[];

Array of attribute values used for dynamically generated advanced search.

property className

className?: string;

Additional classes added to the search input.

property expandableInput

expandableInput?: SearchInputExpandable;

Object that makes the search input expandable/collapsible.

property formAdditionalItems

formAdditionalItems?: React.ReactNode;

property hasWordsAttrLabel

hasWordsAttrLabel?: React.ReactNode;

Attribute label for strings unassociated with one of the provided listed attributes.

property hint

hint?: string;

A suggestion for autocompleting.

property innerRef

innerRef?: React.RefObject<any>;

A reference object to attach to the input box.

property inputProps

inputProps?: any;

Additional props to spread to the search input element.

property isAdvancedSearchOpen

isAdvancedSearchOpen?: boolean;

A flag for controlling the open state of a custom advanced search implementation.

property isDisabled

isDisabled?: boolean;

Flag indicating if search input is disabled.

property isNextNavigationButtonDisabled

isNextNavigationButtonDisabled?: boolean;

Flag indicating if the next navigation button is disabled.

property isPreviousNavigationButtonDisabled

isPreviousNavigationButtonDisabled?: boolean;

Flag indicating if the previous navigation button is disabled.

property name

name?: string;

Name attribute for the search input

property nextNavigationButtonAriaLabel

nextNavigationButtonAriaLabel?: string;

Accessible label for the button to navigate to next result.

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;

A callback for when the input value changes.

property onClear

onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;

A callback for when the user clicks the clear button.

property onNextClick

onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;

A callback for when the user clicks to navigate to next result.

property onPreviousClick

onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;

A callback for when the user clicks to navigate to previous result.

property onSearch

onSearch?: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    value: string,
    attrValueMap: {
        [key: string]: string;
    }
) => void;

A callback for when the search button is clicked.

property onToggleAdvancedSearch

onToggleAdvancedSearch?: (
    event: React.SyntheticEvent<HTMLButtonElement>,
    isOpen?: boolean
) => void;

A callback for when the open advanced search button is clicked.

property openMenuButtonAriaLabel

openMenuButtonAriaLabel?: string;

Accessible label for the button which opens the advanced search form menu.

property placeholder

placeholder?: string;

Placeholder text of the search input.

property previousNavigationButtonAriaLabel

previousNavigationButtonAriaLabel?: string;

Accessible label for the button to navigate to previous result.

property resetButtonLabel

resetButtonLabel?: string;

Label for the button which resets the advanced search form and clears the search input.

property resultsCount

resultsCount?: number | string;

The number of search results returned. Either a total number of results, or a string representing the current result over the total number of results. i.e. "1 / 5".

property resultsCountContext

resultsCountContext?: string;

Screenreader text that will appear after resultsCount to give context for what that value represents to assistive technologies.

property searchInputId

searchInputId?: string;

Id for the search input

property submitSearchButtonLabel

submitSearchButtonLabel?: string;

Label for the button which calls the onSearch event handler.

property value

value?: string;

Value of the search input.

property zIndex

zIndex?: number;

z-index of the advanced search form when appendTo is not inline.

interface SearchInputSearchAttribute

interface SearchInputSearchAttribute {}

Properties for adding search attributes to an advanced search input. These properties must be passed in as an object within an array to the search input component's attribute property.

property attr

attr: string;

The search attribute's value to be provided in the search input's query string. It should have no spaces and be unique for every attribute.

property display

display: React.ReactNode;

The search attribute's display name. It is used to label the field in the advanced search menu.

interface SelectGroupProps

interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {}

See the MenuGroup section of the Menu documentation for additional props that may be passed.

property children

children: React.ReactNode;

Anything which can be rendered in a select group

property className

className?: string;

Classes applied to root element of select group

property label

label?: React.ReactNode;

Label of the select group

interface SelectListProps

interface SelectListProps extends MenuListProps {}

property children

children: React.ReactNode;

Anything which can be rendered in a select list

property className

className?: string;

Classes applied to root element of select list

property isAriaMultiselectable

isAriaMultiselectable?: boolean;

Indicates to assistive technologies whether more than one item can be selected for a non-checkbox select

interface SelectOptionProps

interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {}

See the MenuItem section of the Menu documentation for additional props that may be passed.

property children

children?: React.ReactNode;

Anything which can be rendered in a select option

property className

className?: string;

Classes applied to root element of select option

property description

description?: React.ReactNode;

Description of the option

property hasCheckbox

hasCheckbox?: boolean;

Indicates the option has a checkbox

property icon

icon?: React.ReactNode;

Render option with icon

property innerRef

innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;

Forwarded ref

property isDisabled

isDisabled?: boolean;

Indicates the option is disabled

property isExternalLink

isExternalLink?: boolean;

Render an external link icon on focus or hover, and set the link's "target" attribute to a value of "_blank".

property isFocused

isFocused?: boolean;

Indicates the option is focused

property isSelected

isSelected?: boolean;

Indicates the option is selected

property value

value?: any;

Identifies the component in the Select onSelect callback

interface SelectProps

interface SelectProps extends MenuProps, OUIAProps {}

See the Menu documentation for additional props that may be passed.

property children

children?: React.ReactNode;

Anything which can be rendered in a select

property className

className?: string;

Classes applied to root element of select

property focusTimeoutDelay

focusTimeoutDelay?: number;

Time in ms to wait before firing the toggles' focus event. Defaults to 0

property innerRef

innerRef?: React.Ref<HTMLDivElement>;

Forwarded ref

property isOpen

isOpen?: boolean;

Flag to indicate if select is open

property isPlain

isPlain?: boolean;

Indicates if the select should be without the outer box-shadow

property isScrollable

isScrollable?: boolean;

Indicates if the select menu should be scrollable

property maxMenuHeight

maxMenuHeight?: string;

Maximum height of select menu

property menuHeight

menuHeight?: string;

Height of the select menu

property onOpenChange

onOpenChange?: (isOpen: boolean) => void;

Callback to allow the select component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys.

property onOpenChangeKeys

onOpenChangeKeys?: string[];

Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.

property onSelect

onSelect?: (
    event?: React.MouseEvent<Element, MouseEvent>,
    value?: SelectOptionProps['value']
) => void;

Function callback when user selects an option.

property onToggleKeydown

onToggleKeydown?: (event: KeyboardEvent) => void;

Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.

property popperProps

popperProps?: PopperOptions;

Additional properties to pass to the popper

property role

role?: string;

Determines the accessible role of the select. For a checkbox select pass in "menu".

property selected

selected?: any | any[];

Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption.

property shouldFocusFirstItemOnOpen

shouldFocusFirstItemOnOpen?: boolean;

Flag indicating the first menu item should be focused after opening the menu.
Modifiers
- @beta

property shouldFocusToggleOnSelect

shouldFocusToggleOnSelect?: boolean;

Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus.

property shouldPreventScrollOnItemFocus

shouldPreventScrollOnItemFocus?: boolean;

Flag indicating if scroll on focus of the first menu item should occur.

property toggle

toggle:
    | SelectToggleProps
    | ((toggleRef: React.RefObject<any>) => React.ReactNode);

Select toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.

property variant

variant?: 'default' | 'typeahead';

Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows.

property zIndex

zIndex?: number;

z-index of the select menu

interface SelectToggleProps

interface SelectToggleProps {}

property toggleNode

toggleNode: React.ReactNode;

Select toggle node.

property toggleRef

toggleRef?: React.RefObject<HTMLButtonElement | null>;

Reference to the toggle.

interface SidebarContentProps

interface SidebarContentProps extends React.HTMLProps<HTMLDivElement> {}

property backgroundVariant

backgroundVariant?: 'default' | 'secondary';

Variant of the sidebar content background.

property children

children: React.ReactNode;

property hasNoBackground

hasNoBackground?: boolean;

Removes the background color.

property hasPadding

hasPadding?: boolean;

Adds padding to the content.

interface SidebarPanelProps

interface SidebarPanelProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {}

property backgroundVariant

backgroundVariant?: 'default' | 'secondary';

Variant of the sidebar panel background.

property children

children: React.ReactNode;

property hasNoBackground

hasNoBackground?: boolean;

Removes the background color.

property hasPadding

hasPadding?: boolean;

Adds padding to the panel.

property variant

variant?: 'default' | 'sticky' | 'static';

Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split.

property width

width?: {
    default?:
        | 'default'
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    sm?:
        | 'default'
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    md?:
        | 'default'
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    lg?:
        | 'default'
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    xl?:
        | 'default'
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
    '2xl'?:
        | 'default'
        | 'width_25'
        | 'width_33'
        | 'width_50'
        | 'width_66'
        | 'width_75'
        | 'width_100';
};

Sets the panel width at various breakpoints. Default is 250px when the orientation is split.

interface SidebarProps

interface SidebarProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

property hasBorder

hasBorder?: boolean;

Adds a border between the panel and content.

property hasGutter

hasGutter?: boolean;

Adds space between the panel and content.

property hasNoBackground

hasNoBackground?: boolean;

Removes the background color.

property isPanelRight

isPanelRight?: boolean;

Indicates that the panel is displayed to the right of the content when the oritentation is split.

property orientation

orientation?: 'stack' | 'split';

Indicates the direction of the layout. Default orientation is stack on small screens, and split on medium screens and above.

interface SimpleListGroupProps

interface SimpleListGroupProps
    extends Omit<React.HTMLProps<HTMLTableSectionElement>, 'title'> {}

property children

children?: React.ReactNode;

Content rendered inside the SimpleList group

property className

className?: string;

Additional classes added to the SimpleList

property id

id?: string;

ID of SimpleList group

property title

title?: React.ReactNode;

Title of the SimpleList group

property titleClassName

titleClassName?: string;

Additional classes added to the SimpleList group title

interface SimpleListItemProps

interface SimpleListItemProps {}

property children

children?: React.ReactNode;

Content rendered inside the SimpleList item

property className

className?: string;

Additional classes added to the SimpleList

property component

component?: 'button' | 'a';

Component type of the SimpleList item

property componentClassName

componentClassName?: string;

Additional classes added to the SimpleList or

property componentProps

componentProps?: any;

Additional props added to the SimpleList or

property href

href?: string;

Default hyperlink location

property isActive

isActive?: boolean;

Indicates if the link is current/highlighted

property itemId

itemId?: number | string;

id for the item.

property onClick

onClick?: (event: React.MouseEvent | React.ChangeEvent) => void;

OnClick callback for the SimpleList item

property type

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

Type of button SimpleList item

interface SimpleListProps

interface SimpleListProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect'> {}

property 'aria-label'

'aria-label'?: string;

aria-label for the element that wraps the SimpleList items.

property children

children?: React.ReactNode;

Content rendered inside the SimpleList

property className

className?: string;

Additional classes added to the SimpleList container

property isControlled

isControlled?: boolean;

Indicates whether component is controlled by its internal state

property onSelect

onSelect?: (
    ref:
        | React.RefObject<HTMLButtonElement | null>
        | React.RefObject<HTMLAnchorElement | null>,
    props: SimpleListItemProps
) => void;

Callback when an item is selected

interface SimpleListState

interface SimpleListState {}

property currentRef

currentRef:
    | React.RefObject<HTMLButtonElement | null>
    | React.RefObject<HTMLAnchorElement | null>;

Ref of the current SimpleListItem

interface SkeletonProps

interface SkeletonProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Additional classes added to the Skeleton

property fontSize

fontSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';

The font size height of the Skeleton

property height

height?: string;

The height of the Skeleton. Must specify pixels or percentage.

property screenreaderText

screenreaderText?: string;

Text read just to screen reader users

property shape

shape?: 'circle' | 'square';

The shape of the Skeleton

property width

width?: string;

The width of the Skeleton. Must specify pixels or percentage.

interface SkipToContentProps

interface SkipToContentProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content to display within the skip to content component, typically a string.

property className

className?: string;

Additional styles to apply to the skip to content component.

property href

href: string;

The skip to content link.

interface SliderProps

interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {}

The main slider component.

property 'aria-describedby'

'aria-describedby'?: string;

One or more id's to use for the slider thumb's accessible description.

property 'aria-labelledby'

'aria-labelledby'?: string;

One or more id's to use for the slider thumb's accessible label.

property areCustomStepsContinuous

areCustomStepsContinuous?: boolean;

Flag indicating if the slider is discrete for custom steps. This will cause the slider to snap to the closest value.

property className

className?: string;

Additional classes added to the slider.

property customSteps

customSteps?: SliderStepObject[];

Array of custom slider step objects (value and label of each step) for the slider.

property endActions

endActions?: React.ReactNode;

Actions placed at the end of the slider.

property hasTooltipOverThumb

hasTooltipOverThumb?: boolean;

property inputAriaLabel

inputAriaLabel?: string;

Accessible label for the input field.

property inputLabel

inputLabel?: string | number;

Text label that is place after the input field.

property inputPosition

inputPosition?: 'aboveThumb' | 'right' | 'end';

Position of the input. Note "right" is deprecated. Use "end" instead

property inputValue

inputValue?: number;

Value displayed in the input field.

property isDisabled

isDisabled?: boolean;

Adds disabled styling, and disables the slider and the input component if present.

property isInputVisible

isInputVisible?: boolean;

Flag to show value input field.

property leftActions

leftActions?: React.ReactNode;

Deprecated
Use startActions instead. Actions placed at the start of the slider.

property max

max?: number;

The maximum permitted value.

property min

min?: number;

The minimum permitted value.

property onChange

onChange?: (
    event: SliderOnChangeEvent,
    value: number,
    inputValue?: number,
    setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
) => void;

Value change callback. This is called when the slider value changes.

property rightActions

rightActions?: React.ReactNode;

Deprecated
Use endActions instead. Actions placed to the right of the slider.

property showBoundaries

showBoundaries?: boolean;

Flag to indicate if boundaries should be shown for slider that does not have custom steps.

property showTicks

showTicks?: boolean;

Flag to indicate if ticks should be shown for slider that does not have custom steps.

property startActions

startActions?: React.ReactNode;

Actions placed at the start of the slider.

property step

step?: number;

The step interval.

property thumbAriaLabel

thumbAriaLabel?: string;

property value

value?: number;

Current value of the slider.

interface SliderStepObject

interface SliderStepObject {}

Properties for creating custom steps in a slider. These properties should be passed in as an object within an array to the slider component's customSteps property.

property isLabelHidden

isLabelHidden?: boolean;

Flag to hide the label.

property label

label: string;

The display label for the step value. This is also used for the aria-valuetext attribute.

property value

value: number;

Value of the step. This value is a percentage of the slider where the tick is drawn.

interface SpinnerProps

interface SpinnerProps extends React.SVGProps<SVGSVGElement> {}

property 'aria-label'

'aria-label'?: string;

Accessible label to describe what is loading

property 'aria-labelledBy'

'aria-labelledBy'?: string;

Id of element which describes what is being loaded

property 'aria-valuetext'

'aria-valuetext'?: string;

Text describing that current loading status or progress

property className

className?: string;

Additional classes added to the Spinner.

property diameter

diameter?: string;

Diameter of spinner set as CSS variable

property isInline

isInline?: boolean;

Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop.

property size

size?: 'sm' | 'md' | 'lg' | 'xl';

Size variant of progress.

interface SplitItemProps

interface SplitItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the split layout item.

property className

className?: string;

Additional classes added to the split layout item.

property component

component?: React.ReactNode;

Sets the base component to render. Defaults to div.

property isFilled

isFilled?: boolean;

Flag indicating if this split layout item should fill the available horizontal space.

interface SplitProps

interface SplitProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

content rendered inside the split layout.

property className

className?: string;

Additional classes added to the split layout.

property component

component?: React.ReactNode;

Sets the base component to render. Defaults to div.

property hasGutter

hasGutter?: boolean;

Adds space between children.

property isWrappable

isWrappable?: boolean;

Allows children to wrap.

interface SSRSafeIdsProps

interface SSRSafeIdsProps {}

property children

children: (id: string, ouiaId?: string) => React.ReactNode;

Children render function receiving (generatedId, generatedOuiaId?)

property ouiaComponentType

ouiaComponentType?: string;

OUIA component type. If provided, a stable OUIA ID will be generated.

property prefix

prefix: string;

Prefix for the generated component ID

interface StackItemProps

interface StackItemProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Additional classes added to the stack layout item.

property className

className?: string;

Content rendered inside the stack layout item.

property component

component?: React.ReactNode;

Sets the base component to render. Defaults to div.

property isFilled

isFilled?: boolean;

Flag indicating if this stack layout item should fill the available vertical space.

interface StackProps

interface StackProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the stack layout.

property className

className?: string;

Additional classes added to the stack layout.

property component

component?: React.ReactNode;

Sets the base component to render. Defaults to div.

property hasGutter

hasGutter?: boolean;

Adds space between children.

interface SwitchProps

interface SwitchProps
    extends Omit<
            React.HTMLProps<HTMLInputElement>,
            'type' | 'onChange' | 'disabled' | 'label'
        >,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the switch when the label prop is not passed, and must describe the isChecked="true" state.

property 'aria-labelledby'

'aria-labelledby'?: string;

Adds an accessible name to the switch via one or more referenced id(s). The computed accessible name must describe the isChecked="true" state.

property className

className?: string;

Additional classes added to the switch

property defaultChecked

defaultChecked?: boolean;

Flag to set the default checked value of the switch when it is uncontrolled by React state. To make the switch controlled instead use the isChecked prop, but do not use both.

property hasCheckIcon

hasCheckIcon?: boolean;

Flag to show if the switch has a check icon.

property id

id?: string;

id for the label.

property isChecked

isChecked?: boolean;

Flag to show if the switch is checked when it is controlled by React state. To make the switch uncontrolled instead use the defaultChecked prop, but do not use both.

property isDisabled

isDisabled?: boolean;

Flag to show if the switch is disabled.

property isReversed

isReversed?: boolean;

Flag to reverse the layout of toggle and label (label at start, toggle at end).

property label

label?: React.ReactNode;

Text value for the visible label

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;

A callback for when the switch selection changes. (event, isChecked) => {}

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface TabActionProps

interface TabActionProps
    extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type' | 'size'>,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the tab action

property children

children?: React.ReactNode;

Content rendered in the tab action

property className

className?: string;

Additional classes added to the tab action span

property innerRef

innerRef?: React.Ref<any>;

Callback for the section ref

property isDisabled

isDisabled?: boolean;

Flag indicating if the tab action is disabled

property onClick

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

Click callback for tab action button

interface TabContentBodyProps

interface TabContentBodyProps extends React.HTMLProps<HTMLDivElement> {}

property children

children: React.ReactNode;

Content rendered inside the tab content body.

property className

className?: string;

Additional classes added to the tab content body.

property hasPadding

hasPadding?: boolean;

Indicates if there should be padding around the tab content body

interface TabContentProps

interface TabContentProps
    extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

title of controlling Tab if used outside Tabs component

property activeKey

activeKey?: number | string;

Identifies the active Tab

property child

child?: React.ReactElement<any>;

Child to show in the content area

property children

children?: any;

content rendered inside the tab content area if used outside Tabs component

property className

className?: string;

class of tab content area if used outside Tabs component

property eventKey

eventKey?: number | string;

uniquely identifies the controlling Tab if used outside Tabs component

property id

id: string;

id passed from parent to identify the content section

property innerRef

innerRef?: React.Ref<any>;

Callback for the section ref

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

interface TabProps

interface TabProps
    extends Omit<
            React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>,
            'title' | 'action'
        >,
        OUIAProps {}

property actions

actions?: React.ReactNode;

Actions rendered beside the tab content

property children

children?: React.ReactNode;

content rendered inside the Tab content area.

property className

className?: string;

additional classes added to the Tab

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Aria-label for the close button added by passing the onClose property to Tabs.

property eventKey

eventKey: number | string;

uniquely identifies the tab

property href

href?: string;

URL associated with the Tab. A Tab with an href will render as an instead of a . A Tab inside a should have an href.

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property inoperableEvents

inoperableEvents?: string[];

Events to prevent when the button is in an aria-disabled state

property isAriaDisabled

isAriaDisabled?: boolean;

Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute

property isCloseDisabled

isCloseDisabled?: boolean;

Flag indicating the close button should be disabled

property isDisabled

isDisabled?: boolean;

Adds disabled styling and disables the button using the disabled html attribute

property isHidden

isHidden?: boolean;

whether to render the tab or not

property ouiaId

ouiaId?: number | string;

Value to set the data-ouia-component-id for the tab button.

property tabContentId

tabContentId?: string | number;

child id for case in which a TabContent section is defined outside of a Tabs component

property tabContentRef

tabContentRef?: React.RefObject<any>;

child reference for case in which a TabContent section is defined outside of a Tabs component

property title

title: React.ReactNode;

Content rendered in the tab title. Should be and/or for proper styling.

property tooltip

tooltip?: React.ReactElement<any>;

Optional Tooltip rendered to a Tab. Should be with appropriate props for proper rendering.

interface TabsContextProps

interface TabsContextProps {}

property handleTabClick

handleTabClick: (
    event: React.MouseEvent<HTMLElement, MouseEvent>,
    eventKey: number | string,
    tabContentRef: React.RefObject<any>
) => void;

property handleTabClose

handleTabClose?: (
    event: React.MouseEvent<HTMLElement, MouseEvent>,
    eventKey: number | string,
    tabContentRef?: React.RefObject<any>
) => void;

property localActiveKey

localActiveKey: string | number;

property mountOnEnter

mountOnEnter: boolean;

property setAccentStyles

setAccentStyles?: (shouldInitializeStyles?: boolean) => void;

property uniqueId

uniqueId: string;

property unmountOnExit

unmountOnExit: boolean;

property variant

variant: 'default' | 'secondary';

interface TabsProps

interface TabsProps
    extends Omit<
            React.HTMLProps<HTMLElement | HTMLDivElement>,
            'onSelect' | 'onToggle'
        >,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Provides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page.

property activeKey

activeKey?: number | string;

The index of the active tab

property addButtonAriaLabel

addButtonAriaLabel?: string;

Aria-label for the add button

property backScrollAriaLabel

backScrollAriaLabel?: string;

Aria-label for the back scroll button

property children

children: TabsChild | TabsChild[];

Content rendered inside the tabs component. Only Tab components or expressions resulting in a falsy value are allowed here.

property className

className?: string;

Additional classes added to the tabs

property component

component?: 'div' | 'nav';

Determines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region

property defaultActiveKey

defaultActiveKey?: number | string;

The index of the default active tab. Set this for uncontrolled Tabs

property defaultIsExpanded

defaultIsExpanded?: boolean;

Flag indicating the default expanded state for uncontrolled expand/collapse of

property expandable

expandable?: {
    default?: 'expandable' | 'nonExpandable';
    sm?: 'expandable' | 'nonExpandable';
    md?: 'expandable' | 'nonExpandable';
    lg?: 'expandable' | 'nonExpandable';
    xl?: 'expandable' | 'nonExpandable';
    '2xl'?: 'expandable' | 'nonExpandable';
};

Enable expandable vertical tabs at various breakpoints. (isVertical should be set to true for this to work)

property forwardScrollAriaLabel

forwardScrollAriaLabel?: string;

Aria-label for the forward scroll button

property hasNoBorderBottom

hasNoBorderBottom?: boolean;

Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true.

property id

id?: string;

Uniquely identifies the tabs

property inset

inset?: {
    default?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    sm?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    md?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    lg?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    xl?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    '2xl'?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
};

Insets at various breakpoints.

property isAddButtonDisabled

isAddButtonDisabled?: boolean;

Flag indicating that the add button is disabled when onAdd is passed in

property isBox

isBox?: boolean;

Enables box styling to the tab component

property isExpanded

isExpanded?: boolean;

Flag to indicate if the vertical tabs are expanded

property isFilled

isFilled?: boolean;

Enables the filled tab list layout

property isNav

isNav?: boolean;

Enables horizontal nav tab styling
Modifiers
- @beta

property isOverflowHorizontal

isOverflowHorizontal?: boolean | HorizontalOverflowObject;

Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab.

property isSubtab

isSubtab?: boolean;

Enables subtab tab styling

property isVertical

isVertical?: boolean;

Enables vertical tab styling

property leftScrollAriaLabel

leftScrollAriaLabel?: string;

Deprecated
Please use backScrollAriaLabel. Aria-label for the left scroll button

property mountOnEnter

mountOnEnter?: boolean;

Waits until the first "enter" transition to mount tab children (add them to the DOM)

property onAdd

onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;

Callback for the add button. Passing this property inserts the add button

property onClose

onClose?: (
    event: React.MouseEvent<HTMLElement, MouseEvent>,
    eventKey: TabProps['eventKey']
) => void;

Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property.

property onSelect

onSelect?: (
    event: React.MouseEvent<HTMLElement, MouseEvent>,
    eventKey: TabProps['eventKey']
) => void;

Callback to handle tab selection

property onToggle

onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;

Callback function to toggle the expandable tabs.

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property rightScrollAriaLabel

rightScrollAriaLabel?: string;

Deprecated
Please use forwardScrollAriaLabel. Aria-label for the right scroll button

property tabListAriaLabel

tabListAriaLabel?: string;

A readable string to create an accessible name for the tablist element. This can be used to differentiate multiple tablists on a page, and should be used for subtabs.

property tabListAriaLabelledBy

tabListAriaLabelledBy?: string;

Id of an element that provides an accessible name for the tablist. Use this when a visible label already exists on the page.

property toggleAriaLabel

toggleAriaLabel?: string;

Aria-label for the expandable toggle

property toggleText

toggleText?: string;

Text that appears in the expandable toggle

property unmountOnExit

unmountOnExit?: boolean;

Unmounts tab children (removes them from the DOM) when they are no longer visible

property usePageInsets

usePageInsets?: boolean;

Flag indicates that the tabs should use page insets.

property variant

variant?: 'default' | 'secondary';

Tabs background color variant

interface TabTitleIconProps

interface TabTitleIconProps extends React.HTMLProps<HTMLSpanElement> {}

property children

children: React.ReactNode;

Icon to be rendered inside the tab button title.

property className

className?: string;

additional classes added to the tab title icon

interface TabTitleTextProps

interface TabTitleTextProps extends React.HTMLProps<HTMLSpanElement> {}

property children

children: React.ReactNode;

Text to be rendered inside the tab button title.

property className

className?: string;

additional classes added to the tab title text

interface TextAreaProps

interface TextAreaProps
    extends Omit<HTMLProps<HTMLTextAreaElement>, 'onChange' | 'ref'> {}

property 'aria-label'

'aria-label'?: string;

Custom flag to show that the text area requires an associated id or aria-label.

property autoResize

autoResize?: boolean;

Flag to modify height based on contents.

property className

className?: string;

Additional classes added to the text area.

property innerRef

innerRef?: React.RefObject<any>;

A reference object to attach to the text area.

property isDisabled

isDisabled?: boolean;

Flag to show if the text area is disabled.

property isRequired

isRequired?: boolean;

Flag to show if the text area is required.

property onChange

onChange?: (
    event: React.ChangeEvent<HTMLTextAreaElement>,
    value: string
) => void;

A callback for when the text area value changes.

property readOnlyVariant

readOnlyVariant?: 'default' | 'plain';

Read only variant.

property resizeOrientation

resizeOrientation?: 'horizontal' | 'vertical' | 'both' | 'none';

Sets the orientation to limit the resize to

property validated

validated?: 'success' | 'warning' | 'error' | 'default';

Value to indicate if the text area is modified to show that validation state. If set to success, text area will be modified to indicate valid state. If set to error, text area will be modified to indicate error state.

property value

value?: string | number;

Value of the text area.

interface TextInputExpandedObj

interface TextInputExpandedObj {}

property ariaControls

ariaControls: string;

Id of the element that the text input is controlling expansion of.

property isExpanded

isExpanded: boolean;

Flag to apply expanded styling.

interface TextInputGroupMainProps

interface TextInputGroupMainProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {}

property 'aria-activedescendant'

'aria-activedescendant'?: string;

The id of the active element. Required if role has a value of "combobox", and focus should remain on the input.

property 'aria-controls'

'aria-controls'?: string;

The id of the element(s) controlled by the input. Required if role has a value of "combobox".

property 'aria-label'

'aria-label'?: string;

Accessibility label for the input

property children

children?: React.ReactNode;

Content rendered inside the text input group main div

property className

className?: string;

Additional classes applied to the text input group main container

property hint

hint?: string;

Suggestion that will show up like a placeholder even with text in the input

property icon

icon?: React.ReactNode;

Icon to be shown on the left side of the text input group main container

property innerRef

innerRef?: React.RefObject<any>;

A reference object to attach to the input box

property inputId

inputId?: string;

The id of the input element

property inputProps

inputProps?: any;

Additional props to spread to the input element.

property isExpanded

isExpanded?: boolean;

Flag for whether an associated element controlled by the input is visible. Required if role has a value of "combobox".

property name

name?: string;

Name for the input

property onBlur

onBlur?: (event?: any) => void;

Callback for when focus is lost on the input field

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;

Callback for when there is a change in the input field

property onFocus

onFocus?: (event?: any) => void;

Callback for when the input field is focused

property placeholder

placeholder?: string;

Placeholder value for the input

property role

role?: string;

Determines the accessible role of the input.

property type

type?:
    | 'text'
    | 'date'
    | 'datetime-local'
    | 'email'
    | 'month'
    | 'number'
    | 'password'
    | 'search'
    | 'tel'
    | 'time'
    | 'url';

Type that the input accepts.

property value

value?: string | number;

Value for the input

interface TextInputGroupProps

interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the text input group

property className

className?: string;

Additional classes applied to the text input group container

property innerRef

innerRef?: React.RefObject<any>;

A reference object to attach to the input box

property isDisabled

isDisabled?: boolean;

Adds disabled styling and a disabled context value which text input group main hooks into for the input itself

property isPlain

isPlain?: boolean;

Flag to indicate the toggle has no border or background

property validated

validated?: 'success' | 'warning' | 'error' | 'default' | ValidatedOptions;

Value to indicate if the text input group is modified to show that validation state. If set to success, warning, or error, the group will show that state. If set to default, no validation styling is applied (use to clear a prior validation state).

interface TextInputGroupUtilitiesProps

interface TextInputGroupUtilitiesProps extends React.HTMLProps<HTMLDivElement> {}

property children

children?: React.ReactNode;

Content rendered inside the text input group utilities div

property className

className?: string;

Additional classes applied to the text input group utilities container

interface TextInputProps

interface TextInputProps
    extends Omit<
            React.HTMLProps<HTMLInputElement>,
            'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'
        >,
        OUIAProps {}

property 'aria-label'

'aria-label'?: string;

Aria-label. The text input requires an associated id or aria-label.

property className

className?: string;

Additional classes added to the text input.

property customIcon

customIcon?: React.ReactNode;

Custom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon.

property expandedProps

expandedProps?: TextInputExpandedObj;

Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable.

property innerRef

innerRef?: React.RefObject<any>;

A reference object to attach to the text input box.

property isDisabled

isDisabled?: boolean;

Flag to show if the text input is disabled.

property isExpanded

isExpanded?: boolean;

Deprecated
Flag to apply expanded styling. expandedProps should now be used instead.

property isLeftTruncated

isLeftTruncated?: boolean;

Deprecated
Use isStartTruncated instead. Trim text at start

property isRequired

isRequired?: boolean;

Flag indicating whether the input is required

property isStartTruncated

isStartTruncated?: boolean;

Trim text at start

property onBlur

onBlur?: (event?: any) => void;

Callback function when text input is blurred (focus leaves)

property onChange

onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;

A callback for when the text input value changes.

property onFocus

onFocus?: (event?: any) => void;

Callback function when text input is focused

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property placeholder

placeholder?: string;

Placeholder of the text input when there is no value

property readOnlyVariant

readOnlyVariant?: 'plain' | 'default';

Sets the input as readonly and determines the readonly styling.

property type

type?:
    | 'text'
    | 'date'
    | 'datetime-local'
    | 'email'
    | 'month'
    | 'number'
    | 'password'
    | 'search'
    | 'tel'
    | 'time'
    | 'url';

Type that the text input accepts.

property validated

validated?: 'success' | 'warning' | 'error' | 'default';

Value to indicate if the text input is modified to show that validation state. If set to success, text input will be modified to indicate valid state. If set to error, text input will be modified to indicate error state.

property value

value?: string | number;

Value of the text input.

interface TimePickerProps

interface TimePickerProps
    extends Omit<
        React.HTMLProps<HTMLDivElement>,
        'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'
    > {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the time picker

property className

className?: string;

Additional classes added to the time picker.

property delimiter

delimiter?: string;

Character to display between the hour and minute

property id

id?: string;

Id of the time picker

property includeSeconds

includeSeconds?: boolean;

Includes number of seconds with the chosen time and allows users to manually edit the seconds value.

property inputProps

inputProps?: TextInputProps;

Additional props for input field

property invalidFormatErrorMessage

invalidFormatErrorMessage?: string;

Error message to display when the time is provided in an invalid format.

property invalidMinMaxErrorMessage

invalidMinMaxErrorMessage?: string;

Error message to display when the time provided is not within the minTime/maxTime constraints

property is24Hour

is24Hour?: boolean;

True if the time is 24 hour time. False if the time is 12 hour time

property isDisabled

isDisabled?: boolean;

Flag indicating the time picker is disabled

property isOpen

isOpen?: boolean;

Flag to control the opened state of the time picker menu

property maxTime

maxTime?: string | Date;

A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format

property menuAppendTo

menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';

The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}

property minTime

minTime?: string | Date;

A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format

property onChange

onChange?: (
    event: React.FormEvent<HTMLInputElement>,
    time: string,
    hour?: number,
    minute?: number,
    seconds?: number,
    isValid?: boolean
) => void;

Optional event handler called each time the value in the time picker input changes.

property placeholder

placeholder?: string;

String to display in the empty time picker field as a hint for the expected time format

property setIsOpen

setIsOpen?: (isOpen?: boolean) => void;

Handler invoked each time the open state of time picker updates

property stepMinutes

stepMinutes?: number;

Size of step between time options in minutes.

property time

time?: string | Date;

A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format

property validateTime

validateTime?: (time: string) => boolean;

Optional validator can be provided to override the internal time validator.

property width

width?: string;

Width of the time picker.

property zIndex

zIndex?: number;

z-index of the time picker

interface TimestampProps

interface TimestampProps extends React.HTMLProps<HTMLSpanElement> {}

property children

children?: React.ReactNode;

Displays custom content inside the timestamp, such as a relative time. This prop will override the default content that is displayed. Custom content will not be affected by any props that format or add to displayed content.

property className

className?: string;

Class to add to the outer span.

property customFormat

customFormat?: {
    [key: string]: string;
};

Applies custom formatting to the displayed date and/or time. Passing this prop in will override the dateFormat and timeFormat props.

property date

date?: Date;

Determines the default content that is displayed inside the timestamp and the value of the inner time element's datetime attribute.

property dateFormat

dateFormat?: 'full' | 'long' | 'medium' | 'short';

Determines the format of the displayed date in the timestamp and UTC tooltip. Examples: "Full" => Tuesday, August 9, 2022; "Long" => August 9, 2022; "Medium" => Aug 9, 2022; "Short" => 8/9/22

property displaySuffix

displaySuffix?: string;

Applies a custom suffix to the displayed content, usually after the time, such as a custom time zone.

property is12Hour

is12Hour?: boolean;

Flag for displaying the time in a 12 hour format. If this prop is not passed in, the hour format will be based on the locale prop's value.

property locale

locale?: string;

Determines which locale to use in the displayed content. Defaults to the current locale when this prop is not passed in. For more information about locale's: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation

property shouldDisplayUTC

shouldDisplayUTC?: boolean;

Flag indicating whether the default content should be displayed as a UTC string instead of a local string.

property timeFormat

timeFormat?: 'full' | 'long' | 'medium' | 'short';

Determines the format of the displayed time in the timestamp and UTC tooltip. Examples: "Full" => 11:25:00 AM Eastern Daylight Time "Long" => 11:25:00 AM EDT "Medium" => 11:25:00 AM "Short" => 11:25 AM

property tooltip

tooltip?: TimestampTooltip;

Adds a tooltip to the timestamp.

interface TimestampTooltip

interface TimestampTooltip {}

property content

content?: React.ReactNode;

Content displayed in the tooltip when using the "custom" variant.

property suffix

suffix?: string;

A custom suffix to apply to a "default" variant tooltip.

property tooltipProps

tooltipProps?: any;

Additional props passed to the tooltip.

property variant

variant: 'default' | 'custom';

The variant of the tooltip. The "default" variant displays the date passed into the timestamp's date prop as a UTC string.

interface TitleProps

interface TitleProps
    extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'>,
        OUIAProps {}

property children

children?: React.ReactNode;

Content rendered inside the Title

property className

className?: string;

Additional classes added to the Title

property headingLevel

headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

The heading level to use

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property size

size?: Size;

The size of the Title

interface ToggleGroupItemProps

interface ToggleGroupItemProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {}

property 'aria-label'

'aria-label'?: string;

required when icon is used with no supporting text

property buttonId

buttonId?: string;

Optional id for the button within the toggle group item

property className

className?: string;

Additional classes added to the toggle group item

property icon

icon?: React.ReactNode;

Icon rendered inside the toggle group item

property iconPosition

iconPosition?: 'start' | 'end';

Sets position of the icon when text is also passed in

property isDisabled

isDisabled?: boolean;

Flag indicating if the toggle group item is disabled

property isSelected

isSelected?: boolean;

Flag indicating if the toggle group item is selected

property onChange

onChange?: (
    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
    selected: boolean
) => void;

A callback for when the toggle group item selection changes.

property text

text?: React.ReactNode;

Text rendered inside the toggle group item

interface ToggleGroupProps

interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {}

property 'aria-label'

'aria-label'?: string;

Accessible label for the toggle group

property areAllGroupsDisabled

areAllGroupsDisabled?: boolean;

Disable all toggle group items under this component.

property children

children?: React.ReactNode;

Content rendered inside the toggle group

property className

className?: string;

Additional classes added to the toggle group

property isCompact

isCompact?: boolean;

Modifies the toggle group to include compact styling.

property isFill

isFill?: boolean;

Modifies the toggle group items to fill the available space.

interface ToolbarContentProps

interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {}

property alignItems

alignItems?: 'start' | 'center' | 'baseline' | 'default';

Vertical alignment of children

property children

children?: React.ReactNode;

Content to be rendered as children of the content row

property className

className?: string;

Classes applied to root element of the data toolbar content row

property clearAllFilters

clearAllFilters?: () => void;

Optional callback for clearing all filters in the toolbar

property clearFiltersButtonText

clearFiltersButtonText?: string;

Text to display in the clear all filters button

property isExpanded

isExpanded?: boolean;

Flag indicating if a data toolbar toggle group's expandable content is expanded

property rowWrap

rowWrap?: {
    default?: 'wrap' | 'nowrap';
    sm?: 'wrap' | 'nowrap';
    md?: 'wrap' | 'nowrap';
    lg?: 'wrap' | 'nowrap';
    xl?: 'wrap' | 'nowrap';
    '2xl'?: 'wrap' | 'nowrap';
};

Value to set for content wrapping at various breakpoints

property showClearFiltersButton

showClearFiltersButton?: boolean;

Flag indicating that the clear all filters button should be visible

property toolbarId

toolbarId?: string;

Id of the parent Toolbar component

property visibility

visibility?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various width breakpoints.

property visibilityAtHeight

visibilityAtHeight?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various height breakpoints.

interface ToolbarContextProps

interface ToolbarContextProps {}

property clearAllFilters

clearAllFilters?: () => void;

property clearFiltersButtonText

clearFiltersButtonText?: string;

property customLabelGroupContent

customLabelGroupContent?: React.ReactNode;

property isExpanded

isExpanded: boolean;

property labelGroupContentRef

labelGroupContentRef: RefObject<HTMLDivElement | null>;

property numberOfFilters

numberOfFilters: number;

property showClearFiltersButton

showClearFiltersButton?: boolean;

property toggleIsExpanded

toggleIsExpanded: () => void;

property toolbarId

toolbarId?: string;

property updateNumberFilters

updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;

interface ToolbarExpandableContentProps

interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Classes added to the root element of the data toolbar expandable content

property clearAllFilters

clearAllFilters?: () => void;

optional callback for clearing all filters in the toolbar

property clearFiltersButtonText

clearFiltersButtonText?: string;

Text to display in the clear all filters button

property expandableContentRef

expandableContentRef?: RefObject<HTMLDivElement | null>;

Expandable content reference for passing to data toolbar children

property isExpanded

isExpanded?: boolean;

Flag indicating the expandable content is expanded

property labelContainerRef

labelContainerRef?: RefObject<any>;

Label container reference for passing to data toolbar children

property showClearFiltersButton

showClearFiltersButton: boolean;

Flag indicating that the clear all filters button should be visible

interface ToolbarExpandIconWrapperProps

interface ToolbarExpandIconWrapperProps extends React.HTMLProps<HTMLSpanElement> {}

property children

children?: React.ReactNode;

Icon content used for the expand all or collapse all indication.

property className

className?: string;

Additional classes added to the span

interface ToolbarFilterProps

interface ToolbarFilterProps extends ToolbarItemProps {}

property categoryName

categoryName: string | ToolbarLabelGroup;

Unique category name to be used as a label for the label group

property children

children: React.ReactNode;

Content to be rendered inside the data toolbar item associated with the label group

property deleteLabel

deleteLabel?: (
    category: string | ToolbarLabelGroup,
    label: ToolbarLabel | string
) => void;

Callback passed by consumer used to delete a label from the labels[]

property deleteLabelGroup

deleteLabelGroup?: (category: string | ToolbarLabelGroup) => void;

Callback passed by consumer used to close the entire label group

property expandableLabelContainerRef

expandableLabelContainerRef?: React.RefObject<HTMLDivElement | null>;

Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups.

property isExpanded

isExpanded?: boolean;

Flag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups.

property labelGroupCollapsedText

labelGroupCollapsedText?: string;

Customizable template string for the label group. Use variable "${remaining}" for the overflow label count.

property labelGroupExpandedText

labelGroupExpandedText?: string;

Customizable "Show Less" text string for the label group

property labels

labels?: (string | ToolbarLabel)[];

An array of strings to be displayed as labels in the expandable content

property showToolbarItem

showToolbarItem?: boolean;

Flag to show the toolbar item

interface ToolbarGroupProps

interface ToolbarGroupProps
    extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onToggle'> {}

property align

align?: {
    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
};

Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis

property alignItems

alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';

Vertical alignment of children

property alignSelf

alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';

Vertical alignment

property children

children?: React.ReactNode;

Content to be rendered inside the data toolbar group

property className

className?: string;

Classes applied to root element of the data toolbar group

property columnGap

columnGap?: {
    default?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    md?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    lg?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    xl?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    '2xl'?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
};

Sets only the column gap at various breakpoints.

property gap

gap?: {
    default?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    md?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    lg?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    xl?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    '2xl'?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
};

Sets both the column and row gap at various breakpoints.

property innerRef

innerRef?: React.RefObject<any>;

Reference to pass to this group if it has .pf-m-label-container modifier

property isOverflowContainer

isOverflowContainer?: boolean;

Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation.

property rowGap

rowGap?: {
    default?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    md?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    lg?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    xl?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    '2xl'?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
};

Sets only the row gap at various breakpoints.

property rowWrap

rowWrap?: {
    default?: 'wrap' | 'nowrap';
    sm?: 'wrap' | 'nowrap';
    md?: 'wrap' | 'nowrap';
    lg?: 'wrap' | 'nowrap';
    xl?: 'wrap' | 'nowrap';
    '2xl'?: 'wrap' | 'nowrap';
};

Value to set for row wrapping at various breakpoints

property variant

variant?:
    | ToolbarGroupVariant
    | 'filter-group'
    | 'action-group'
    | 'action-group-inline'
    | 'action-group-plain'
    | 'label-group';

A type modifier which modifies spacing specifically depending on the type of group

property visibility

visibility?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various width breakpoints.

property visibilityAtHeight

visibilityAtHeight?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various height breakpoints.

interface ToolbarItemProps

interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {}

property align

align?: {
    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
};

Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis

property alignItems

alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';

Vertical alignment of children

property alignSelf

alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';

Vertical alignment

property children

children?: React.ReactNode;

Content to be rendered inside the data toolbar item

property className

className?: string;

Classes applied to root element of the data toolbar item

property columnGap

columnGap?: {
    default?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    md?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    lg?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    xl?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    '2xl'?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
};

Sets only the column gap at various breakpoints.

property gap

gap?: {
    default?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    md?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    lg?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    xl?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    '2xl'?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
};

Sets both the column and row gap at various breakpoints.

property id

id?: string;

id for this data toolbar item

property isAllExpanded

isAllExpanded?: boolean;

Flag indicating if the expand-all variant is expanded or not

property isOverflowContainer

isOverflowContainer?: boolean;

Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation.

property rowGap

rowGap?: {
    default?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    md?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    lg?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    xl?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    '2xl'?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
};

Sets only the row gap at various breakpoints.

property rowWrap

rowWrap?: {
    default?: 'wrap' | 'nowrap';
    sm?: 'wrap' | 'nowrap';
    md?: 'wrap' | 'nowrap';
    lg?: 'wrap' | 'nowrap';
    xl?: 'wrap' | 'nowrap';
    '2xl'?: 'wrap' | 'nowrap';
};

Value to set for row wrapping at various breakpoints

property variant

variant?:
    | ToolbarItemVariant
    | 'pagination'
    | 'label'
    | 'label-group'
    | 'separator'
    | 'expand-all';

A type modifier which modifies spacing specifically depending on the type of item

property visibility

visibility?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various width breakpoints.

property visibilityAtHeight

visibilityAtHeight?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various height breakpoints.

interface ToolbarLabel

interface ToolbarLabel {}

property key

key: string;

A unique key to identify this label

property node

node: React.ReactNode;

The ReactNode to display in the label

interface ToolbarLabelGroup

interface ToolbarLabelGroup {}

property key

key: string;

A unique key to identify this label group category

property name

name: string;

The category name to display for the label group

interface ToolbarProps

interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {}

property children

children?: React.ReactNode;

Content to be rendered as rows in the data toolbar

property className

className?: string;

Classes applied to root element of the data toolbar

property clearAllFilters

clearAllFilters?: () => void;

Optional callback for clearing all filters in the toolbar

property clearFiltersButtonText

clearFiltersButtonText?: string;

Text to display in the clear all filters button

property collapseListedFiltersBreakpoint

collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';

The breakpoint at which the listed filters in label groups are collapsed down to a summary

property colorVariant

colorVariant?:
    | ToolbarColorVariant
    | 'default'
    | 'no-background'
    | 'primary'
    | 'secondary';

Background color variant of the toolbar

property customLabelGroupContent

customLabelGroupContent?: React.ReactNode;

Custom content appended to the filter generated label group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button.

property hasNoPadding

hasNoPadding?: boolean;

Flag indicating the toolbar padding is removed

property id

id?: string;

Id of the data toolbar

property inset

inset?: {
    default?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    sm?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    md?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    lg?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    xl?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
    '2xl'?:
        | 'insetNone'
        | 'insetSm'
        | 'insetMd'
        | 'insetLg'
        | 'insetXl'
        | 'inset2xl';
};

Insets at various breakpoints.

property isExpanded

isExpanded?: boolean;

Flag indicating if a data toolbar toggle group's expandable content is expanded

property isFullHeight

isFullHeight?: boolean;

Flag indicating the toolbar height should expand to the full height of the container

property isStatic

isStatic?: boolean;

Flag indicating the toolbar is static

property isSticky

isSticky?: boolean;

Flag indicating the toolbar should stick to the top of its container. This property applies both the sticky position and styling.

property isStickyBase

isStickyBase?: boolean;

Flag indicating the toolbar should have sticky positioning to the top of its container
Modifiers
- @beta

property isStickyStuck

isStickyStuck?: boolean;

Flag indicating the toolbar should have stuck styling, when the toolbar is not at the top of the scroll container
Modifiers
- @beta

property isVertical

isVertical?: boolean;

Flag indicating the toolbar has a vertical orientation
Modifiers
- @beta

property numberOfFiltersText

numberOfFiltersText?: (numberOfFilters: number) => string;

Text to display in the total number of applied filters ToolbarFilter

property ouiaId

ouiaId?: number | string;

Value to overwrite the randomly generated data-ouia-component-id.

property ouiaSafe

ouiaSafe?: boolean;

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

property toggleIsExpanded

toggleIsExpanded?: () => void;

A callback for setting the isExpanded flag

interface ToolbarState

interface ToolbarState {}

property filterInfo

filterInfo: FilterInfo;

Object managing information about how many labels are in each label group

property isManagedToggleExpanded

isManagedToggleExpanded: boolean;

Flag used if the user has opted NOT to manage the 'isExpanded' state of the toggle group. Indicates whether or not the toggle group is expanded.

property windowWidth

windowWidth: number;

Used to keep track of window width so we can collapse expanded content when window is resizing

interface ToolbarToggleGroupProps

interface ToolbarToggleGroupProps extends ToolbarGroupProps {}

property breakpoint

breakpoint: 'md' | 'lg' | 'xl' | '2xl';

Controls when filters are shown and when the toggle button is hidden.

property clearAllFilters

clearAllFilters?: () => void;

Optional callback for clearing all filters in the toolbar toggle group

property clearFiltersButtonText

clearFiltersButtonText?: string;

Text to display in the clear all filters button of the toolbar toggle group

property columnGap

columnGap?: {
    default?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    md?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    lg?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    xl?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
    '2xl'?:
        | 'columnGapNone'
        | 'columnGapXs'
        | 'columnGapSm'
        | 'columnGapMd'
        | 'columnGapLg'
        | 'columnGapXl'
        | 'columnGap_2xl'
        | 'columnGap_3xl'
        | 'columnGap_4xl';
};

Sets only the column gap at various breakpoints.

property gap

gap?: {
    default?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    md?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    lg?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    xl?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
    '2xl'?:
        | 'gapNone'
        | 'gapXs'
        | 'gapSm'
        | 'gapMd'
        | 'gapLg'
        | 'gapXl'
        | 'gap_2xl'
        | 'gap_3xl'
        | 'gap_4xl';
};

Sets both the column and row gap at various breakpoints.

property isExpanded

isExpanded?: boolean;

Flag indicating when toggle group is expanded for non-managed toolbar toggle groups.

property labelContainerRef

labelContainerRef?: React.RefObject<any>;

Reference to a label container group for filters inside the toolbar toggle group

property onToggle

onToggle?: (event: React.MouseEvent) => void;

Callback for toggle group click event for non-managed toolbar toggle groups.

property rowGap

rowGap?: {
    default?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    md?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    lg?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    xl?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
    '2xl'?:
        | 'rowGapNone'
        | 'rowGapXs'
        | 'rowGapSm'
        | 'rowGapMd'
        | 'rowGapLg'
        | 'rowGapXl'
        | 'rowGap_2xl'
        | 'rowGap_3xl'
        | 'rowGap_4xl';
};

Sets only the row gap at various breakpoints.

property showClearFiltersButton

showClearFiltersButton?: boolean;

Flag indicating that the clear all filters button should be visible in the toolbar toggle group

property toggleIcon

toggleIcon: React.ReactNode;

An icon to be rendered when the toggle group has collapsed down

property visibility

visibility?: {
    default?: 'hidden' | 'visible';
    md?: 'hidden' | 'visible';
    lg?: 'hidden' | 'visible';
    xl?: 'hidden' | 'visible';
    '2xl'?: 'hidden' | 'visible';
};

Visibility at various breakpoints.

interface TooltipProps

interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {}

property 'aria-live'

'aria-live'?: 'off' | 'polite';

Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the default behavior is 'polite' in order to ensure the tooltip contents is announced to assistive technologies. Otherwise the default behavior is 'off'.

property animationDuration

animationDuration?: number;

CSS fade transition animation duration

property appendTo

appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);

The element to append the tooltip to, defaults to body

property aria

aria?: 'describedby' | 'labelledby' | 'none';

aria-labelledby or aria-describedby for tooltip. The trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container. If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'.

property children

children?: ReactElement<any>;

The trigger reference element to which the Tooltip is relatively placed to. If you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead. Usage: Reference

property className

className?: string;

Tooltip additional class

property content

content: React.ReactNode;

Tooltip content

property distance

distance?: number;

Distance of the tooltip to its target, defaults to 15

property enableFlip

enableFlip?: boolean;

If true, tries to keep the tooltip in view by flipping it if necessary

property entryDelay

entryDelay?: number;

Delay in ms before the tooltip appears

property exitDelay

exitDelay?: number;

Delay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should be given ample time to move their mouse from the trigger to the tooltip content without the content being hidden.

property flipBehavior

flipBehavior?:
    | 'flip'
    | (
          | 'top'
          | 'bottom'
          | 'left'
          | 'right'
          | 'top-start'
          | 'top-end'
          | 'bottom-start'
          | 'bottom-end'
          | 'left-start'
          | 'left-end'
          | 'right-start'
          | 'right-end'
      )[];

The desired position to flip the tooltip to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the tooltip on the left.

property id

id?: string;

id of the tooltip

property isContentLeftAligned

isContentLeftAligned?: boolean;

Flag to indicate that the text content is left aligned

property isVisible

isVisible?: boolean;

value for visibility when trigger is 'manual'

property maxWidth

maxWidth?: string;

Maximum width of the tooltip (default 18.75rem)

property minWidth

minWidth?: string | 'trigger';

Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width.

property onTooltipHidden

onTooltipHidden?: () => void;

Callback when tooltip's hide transition has finished executing

property position

position?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Tooltip position. Note: With 'enableFlip' set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior prop. The 'auto' position chooses the side with the most space. The 'auto' position requires the 'enableFlip' prop to be true.

property trigger

trigger?: string;

Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop)

property triggerRef

triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;

The trigger reference element to which the Tooltip is relatively placed to. If you can wrap the element with the Tooltip, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Tooltip triggerRef={() => document.getElementById('reference-element')} />

property zIndex

zIndex?: number;

z-index of the tooltip

interface TreeViewDataItem

interface TreeViewDataItem {}

Properties that make up a tree view data item. These properties should be passed in as an object to one of the various tree view component properties which accept TreeViewDataItem as a type.

property action

action?: React.ReactNode;

Action of a tree view item, which can be either a button or dropdown component.

property badgeProps

badgeProps?: any;

Additional properties of the tree view item badge.

property checkProps

checkProps?: TreeViewCheckProps;

Additional properties of the tree view item checkbox.

property children

children?: TreeViewDataItem[];

Child nodes of a tree view item.

property customBadgeContent

customBadgeContent?: React.ReactNode;

Optional prop for a custom badge.

property defaultExpanded

defaultExpanded?: boolean;

Flag indicating if node is expanded by default.

property expandedIcon

expandedIcon?: React.ReactNode;

Expanded icon of a tree view item.

property hasBadge

hasBadge?: boolean;

Flag indicating if a tree view item has a badge.

property hasCheckbox

hasCheckbox?: boolean;

Flag indicating if a tree view item has a checkbox.

property icon

icon?: React.ReactNode;

Default icon of a tree view item.

property id

id?: string;

ID of a tree view item.

property isDisabled

isDisabled?: boolean;

Flag indicating if the tree view item is disabled.

property isToggleDisabled

isToggleDisabled?: boolean;

Flag indicating if the tree view item toggle is disabled.

property name

name: React.ReactNode;

Internal content of a tree view item.

property title

title?: React.ReactNode;

Title of a tree view item. Only used in compact presentations.

interface TreeViewProps

interface TreeViewProps {}

The main tree view component.

property 'aria-label'

'aria-label'?: string;

A text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must be passed in.

property 'aria-labelledby'

'aria-labelledby'?: string;

A space separated list of element id's that sets the accessible name of the tree view list. Either this or the aria-label property must be passed in.

property activeItems

activeItems?: TreeViewDataItem[];

Active items of tree view.

property allExpanded

allExpanded?: boolean;

Sets the expanded state on all tree nodes, overriding default behavior and current internal state.

property className

className?: string;

Class to add if not passed a parentItem property.

property compareItems

compareItems?: (
    item: TreeViewDataItem,
    itemToCheck: TreeViewDataItem
) => boolean;

Comparison function for determining active items.

property data

data: TreeViewDataItem[];

Data of the tree view.

property defaultAllExpanded

defaultAllExpanded?: boolean;

Sets the default expanded behavior.

property expandedIcon

expandedIcon?: React.ReactNode;

Icon for all expanded node items.

property hasAnimations

hasAnimations?: boolean;

Flag indicating whether a tree view has animations. This will always render nested tree view items rather than dynamically rendering them. This prop will be removed in the next breaking change release in favor of defaulting to always-rendered items.

property hasBadges

hasBadges?: boolean;

Flag indicating if all nodes in the tree view should have badges.

property hasCheckboxes

hasCheckboxes?: boolean;

Flag indicating if all nodes in the tree view should have checkboxes.

property hasGuides

hasGuides?: boolean;

Flag indicating if the tree view has guide lines.

property hasSelectableNodes

hasSelectableNodes?: boolean;

Flag indicating that tree nodes should be independently selectable, even when having children.

property icon

icon?: React.ReactNode;

Icon for all leaf or unexpanded node items.

property id

id?: string;

ID of the tree view.

property isMultiSelectable

isMultiSelectable?: boolean;

Flag indicating whether multiple nodes can be selected in the tree view. This will also set the aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended. Can only be applied to the root tree view list.

property isNested

isNested?: boolean;

Flag indicating if the tree view is nested.

property onCheck

onCheck?: (
    event: React.ChangeEvent<HTMLInputElement>,
    item: TreeViewDataItem,
    parentItem: TreeViewDataItem
) => void;

Callback for item checkbox selection.

property onCollapse

onCollapse?: (
    event: React.MouseEvent,
    item: TreeViewDataItem,
    parentItem: TreeViewDataItem
) => void;

Callback for collapsing a node with children.

property onExpand

onExpand?: (
    event: React.MouseEvent,
    item: TreeViewDataItem,
    parentItem: TreeViewDataItem
) => void;

Callback for expanding a node with children.

property onSelect

onSelect?: (
    event: React.MouseEvent,
    item: TreeViewDataItem,
    parentItem: TreeViewDataItem
) => void;

Callback for item selection.

property parentItem

parentItem?: TreeViewDataItem;

Internal. Parent item of a tree view list item.

toolbar?: React.ReactNode;

Toolbar to display above the tree view.

property useMemo

useMemo?: boolean;

Flag indicating the tree view should utilize memoization to help render large data sets. Setting this property requires that the activeItems property is passed an array containing every node in the selected item's path.

property variant

variant?: 'default' | 'compact' | 'compactNoBackground';

Variant presentation styles for the tree view.

interface TreeViewSearchProps

interface TreeViewSearchProps extends React.HTMLProps<HTMLInputElement> {}

Renders a search input for the tree view. This sub-component should be passed into the tree view component's toolbar property.

property 'aria-label'

'aria-label'?: string;

Accessible label for the search input.

property className

className?: string;

Classes applied to the wrapper for the search input.

property id

id?: string;

Id for the search input.

property name

name?: string;

Name for the search input.

property onSearch

onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;

Callback for search input.

interface TruncateProps

interface TruncateProps
    extends Omit<React.HTMLProps<HTMLSpanElement | HTMLAnchorElement>, 'ref'> {}

property className

className?: string;

Class to add to outer span

property content

content: string;

Text to truncate

property href

href?: string;

An HREF to turn the truncate wrapper into an anchor element. For more custom control, use the tooltipProps with a triggerRef property passed in.

property innerRef

innerRef?: React.Ref<any>;

Forwarded ref

property maxCharsDisplayed

maxCharsDisplayed?: number;

The maximum number of characters to display before truncating. This will always truncate content when its length exceeds the value passed to this prop, and container width/resizing will not affect truncation.

property omissionContent

omissionContent?: string;

The content to use to signify omission of characters when using the maxCharsDisplayed prop. By default this will render an ellipsis.

property position

position?: 'start' | 'middle' | 'end';

Where the text will be truncated

property tooltipPosition

tooltipPosition?:
    | TooltipPosition
    | 'auto'
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

Tooltip position

property tooltipProps

tooltipProps?: Omit<TooltipProps, 'content'>;

Additional props to pass to the tooltip.

property trailingNumChars

trailingNumChars?: number;

The number of characters displayed in the second half of a middle truncation. This will be overridden by the maxCharsDisplayed prop.

interface WizardBasicStep

interface WizardBasicStep {}

Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents.

property component

component?: React.ReactElement<any>;

Content shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown.

footer?: React.ReactElement<any> | Partial<WizardFooterProps>;

Replaces the step's footer. The step's footer takes precedence over the wizard's footer.

property id

id: string | number;

Unique identifier

property index

index: number;

Order index of step (starts at 1)

property isDisabled

isDisabled?: boolean;

Flag to disable the step's navigation item

property isHidden

isHidden?: boolean;

Flag to determine whether the step is hidden

property isVisited

isVisited?: boolean;

Flag to represent whether the step has been visited (navigated to)

property name

name: React.ReactNode;

Name of the step's navigation item

property navItem

navItem?: WizardNavItemType;

Replaces the step's navigation item or its properties.

property status

status?: 'default' | 'error' | 'success' | 'warning';

Used to determine icon next to the step's navItem

interface WizardBodyProps

interface WizardBodyProps extends React.HTMLProps<HTMLElement> {}

Used as a wrapper for WizardStep content, where the wrapping element is customizable.

property 'aria-label'

'aria-label'?: string;

Adds an accessible name to the wrapper element when the content overflows and renders a scrollbar.

property 'aria-labelledby'

'aria-labelledby'?: string;

Adds an accessible name to the wrapper element by passing the the id of one or more elements. The aria-labelledby will only be applied when the content overflows and renders a scrollbar.

property children

children: React.ReactNode;

Anything that can be rendered in the Wizard body

property className

className?: string;

Additional classes spread to the wizard body

property component

component?: React.ElementType;

Component used as the wrapping content container

property hasNoPadding

hasNoPadding?: boolean;

Flag to remove the default body padding

interface WizardFooterProps

interface WizardFooterProps extends React.HTMLProps<HTMLElement> {}

Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.

property activeStep

activeStep: WizardStepType;

The active step

property backButtonProps

backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;

Additional props for the Back button.

property backButtonText

backButtonText?: React.ReactNode;

Custom text for the Back button

property cancelButtonProps

cancelButtonProps?: WizardFooterButtonProps;

Additional props for the Cancel button.

property cancelButtonText

cancelButtonText?: React.ReactNode;

Custom text for the Cancel link

property className

className?: string;

Additional classes spread to the wizard footer

property isBackDisabled

isBackDisabled?: boolean;

Flag to disable the back button

property isBackHidden

isBackHidden?: boolean;

Flag to hide the back button

property isCancelHidden

isCancelHidden?: boolean;

Flag to hide the cancel button

property isNextDisabled

isNextDisabled?: boolean;

Flag to disable the next button

property nextButtonProps

nextButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled' | 'type'>;

Additional props for the Next button.

property nextButtonText

nextButtonText?: React.ReactNode;

Custom text for the Next button. The current step's nextButtonText takes precedence.

property onBack

onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;

Back button callback

property onClose

onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;

Cancel link callback

property onNext

onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;

Next button callback

interface WizardHeaderProps

interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {}

property className

className?: string;

Additional classes spread to the wizard header

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Aria-label applied to the X (Close) button

property description

description?: React.ReactNode;

Description of the wizard

property descriptionComponent

descriptionComponent?: 'div' | 'p';

Component type of the description

property descriptionId

descriptionId?: string;

id for the description

property isCloseHidden

isCloseHidden?: boolean;

Flag indicating whether the close button should be in the header

property onClose

onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;

Callback function called when the X (Close) button is clicked

property title

title: string;

Title of the wizard

property titleId

titleId?: string;

id for the title

interface WizardNavItemProps

interface WizardNavItemProps
    extends Omit<
            React.HTMLProps<HTMLLIElement>,
            'onClick' | 'id' | 'content' | 'type'
        >,
        OUIAProps {}

property children

children?: React.ReactNode;

Can nest a WizardNav component for substeps

property className

className?: string;

Additional classes spread to the wizard nav item

property component

component?: 'button' | 'a';

Component used to render WizardNavItem

property content

content?: React.ReactNode;

The content to display in the navigation item

property href

href?: string;

An optional url to use for when using an anchor component

property id

id?: string | number;

The id for the navigation item

property isCurrent

isCurrent?: boolean;

Whether the navigation item is the currently active item

property isDisabled

isDisabled?: boolean;

Whether the navigation item is disabled

property isExpandable

isExpandable?: boolean;

Flag indicating that this NavItem has child steps and is expandable

property isVisited

isVisited?: boolean;

Whether the navigation item has been visited

property onClick

onClick?: (
    event:
        | React.MouseEvent<HTMLButtonElement>
        | React.MouseEvent<HTMLAnchorElement>,
    index: number
) => any;

Callback for when the navigation item is clicked

property status

status?: 'default' | 'error' | 'success' | 'warning';

Used to determine the icon displayed next to content. Default has no icon.

property stepIndex

stepIndex: number;

The step index passed into the onNavItemClick callback

property target

target?: React.HTMLAttributeAnchorTarget;

Where to display the linked URL when using an anchor component

interface WizardNavProps

interface WizardNavProps
    extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {}

property 'aria-label'

'aria-label'?: string;

Aria-label applied to the navigation element

property 'aria-labelledby'

'aria-labelledby'?: string;

Sets the aria-labelledby attribute on the navigation element

property children

children?: any;

children should be WizardNavItem components

property className

className?: string;

Additional classes spread to the wizard nav

property isExpanded

isExpanded?: boolean;

Whether the navigation is expanded

property isInnerList

isInnerList?: boolean;

True to return the inner list without the wrapping navigation element

interface WizardParentStep

interface WizardParentStep extends WizardBasicStep {}

Type used to define parent steps.

property isExpandable

isExpandable?: boolean;

Flag to determine whether the step can expand or not.

property subStepIds

subStepIds: (string | number)[];

Nested step IDs

interface WizardProps

interface WizardProps extends React.HTMLProps<HTMLDivElement> {}

Wrapper for all steps and hosts state, including navigation helpers, within context. The WizardContext provided by default gives any child of wizard access to those resources.

property children

children: React.ReactNode;

Step components

property className

className?: string;

Additional classes spread to the wizard

footer?: WizardFooterType;

Wizard footer

header?: React.ReactNode;

Wizard header

property height

height?: number | string;

Custom height of the wizard

property isNoPlainOnGlass

isNoPlainOnGlass?: boolean;

Prevents the wizard from automatically applying plain styling when glass theme is enabled.
Modifiers
- @beta

property isPlain

isPlain?: boolean;

Adds plain styling to the wizard.

property isProgressive

isProgressive?: boolean;

Progressively shows steps, where all steps following the active step are hidden. Defaults to false.

property isVisitRequired

isVisitRequired?: boolean;

Disables steps that haven't been visited. Defaults to false.

property nav

nav?: WizardNavType;

Wizard navigation

property navAriaLabel

navAriaLabel?: string;

Aria-label for the Nav

property onClose

onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;

Callback function to close the wizard

property onSave

onSave?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;

Callback function to save at the end of the wizard, if not specified uses onClose

property onStepChange

onStepChange?: (
    event: React.MouseEvent<HTMLButtonElement>,
    currentStep: WizardStepType,
    prevStep: WizardStepType,
    scope: WizardStepChangeScope
) => void | Promise<void>;

Callback function when navigating between steps

property shouldFocusContent

shouldFocusContent?: boolean;

Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks are called.

property startIndex

startIndex?: number;

The initial index the wizard is to start on (1 or higher). Defaults to 1.

property width

width?: number | string;

Custom width of the wizard

interface WizardStepProps

interface WizardStepProps {}

The primary child component for Wizard. Step props are used for the list of steps managed in context.

property body

body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'>;

Props for WizardBody that wraps content by default.

property children

children?: React.ReactNode | undefined;

Optional for when the step is used as a parent to sub-steps

footer?: React.ReactElement<any> | Partial<WizardFooterProps>;

Replaces the step's footer. The step's footer takes precedence over the wizard's footer.

property id

id: string | number;

Unique identifier

property isDisabled

isDisabled?: boolean;

Flag to disable the step's navigation item

property isExpandable

isExpandable?: boolean;

Flag to determine whether parent steps can expand or not. Defaults to false.

property isHidden

isHidden?: boolean;

Flag to determine whether the step is hidden

property name

name: React.ReactNode;

Name of the step's navigation item

property navItem

navItem?: WizardNavItemType;

Replaces the step's navigation item or its properties.

property status

status?: 'default' | 'error' | 'success' | 'warning';

Used to determine icon next to the step's navigation item

property steps

steps?: React.ReactElement<WizardStepProps>[];

Optional list of sub-steps

interface WizardSubStep

interface WizardSubStep extends WizardBasicStep {}

Type used to define sub-steps.

property parentId

parentId: string | number;

Unique identifier of the parent step

interface WizardToggleProps

interface WizardToggleProps {}

Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.

property 'aria-label'

'aria-label'?: string;

The expandable dropdown button's aria-label

property activeStep

activeStep: WizardStepType;

The current step

footer: React.ReactElement<any>;

Wizard footer

property isNavExpanded

isNavExpanded?: boolean;

Flag to determine whether the dropdown navigation is expanded

property nav

nav: React.ReactElement<WizardNavProps>;

Wizard navigation

property steps

steps: WizardStepType[];

List of steps and/or sub-steps

property toggleNavExpanded

toggleNavExpanded?: (
    event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent
) => void;

Callback to expand or collapse the dropdown navigation

Enums

enum AlertVariant

enum AlertVariant {
    success = 'success',
    danger = 'danger',
    warning = 'warning',
    info = 'info',
    custom = 'custom',
}

member custom

custom = 'custom'

member danger

danger = 'danger'

member info

info = 'info'

member success

success = 'success'

member warning

warning = 'warning'

enum BaseSizes

enum BaseSizes {
    xs = 'xs',
    sm = 'sm',
    md = 'md',
    lg = 'lg',
    xl = 'xl',
    '2xl' = '2xl',
    '3xl' = '3xl',
    '4xl' = '4xl',
}

member '2xl'

'2xl' = '2xl'

member '3xl'

'3xl' = '3xl'

member '4xl'

'4xl' = '4xl'

member lg

lg = 'lg'

member md

md = 'md'

member sm

sm = 'sm'

member xl

xl = 'xl'

member xs

xs = 'xs'

enum ButtonSize

enum ButtonSize {
    default = 'default',
    sm = 'sm',
    lg = 'lg',
}

member default

default = 'default'

member lg

lg = 'lg'

member sm

sm = 'sm'

enum ButtonState

enum ButtonState {
    read = 'read',
    unread = 'unread',
    attention = 'attention',
}

member attention

attention = 'attention'

member read

read = 'read'

member unread

unread = 'unread'

enum ButtonType

enum ButtonType {
    button = 'button',
    submit = 'submit',
    reset = 'reset',
}

member button

button = 'button'

member reset

reset = 'reset'

member submit

submit = 'submit'

enum ButtonVariant

enum ButtonVariant {
    primary = 'primary',
    secondary = 'secondary',
    tertiary = 'tertiary',
    danger = 'danger',
    warning = 'warning',
    link = 'link',
    plain = 'plain',
    control = 'control',
    stateful = 'stateful',
}

member control

control = 'control'

member danger

danger = 'danger'

member link

link = 'link'

member plain

plain = 'plain'

member primary

primary = 'primary'

member secondary

secondary = 'secondary'

member stateful

stateful = 'stateful'

member tertiary

tertiary = 'tertiary'

member warning

warning = 'warning'

enum ClipboardCopyVariant

enum ClipboardCopyVariant {
    inline = 'inline',
    expansion = 'expansion',
    inlineCompact = 'inline-compact',
}

member expansion

expansion = 'expansion'

member inline

inline = 'inline'

member inlineCompact

inlineCompact = 'inline-compact'

enum ContentVariants

enum ContentVariants {
    h1 = 'h1',
    h2 = 'h2',
    h3 = 'h3',
    h4 = 'h4',
    h5 = 'h5',
    h6 = 'h6',
    p = 'p',
    a = 'a',
    small = 'small',
    blockquote = 'blockquote',
    pre = 'pre',
    hr = 'hr',
    ul = 'ul',
    ol = 'ol',
    dl = 'dl',
    li = 'li',
    dt = 'dt',
    dd = 'dd',
}

member a

a = 'a'

member blockquote

blockquote = 'blockquote'

member dd

dd = 'dd'

member dl

dl = 'dl'

member dt

dt = 'dt'

member h1

h1 = 'h1'

member h2

h2 = 'h2'

member h3

h3 = 'h3'

member h4

h4 = 'h4'

member h5

h5 = 'h5'

member h6

h6 = 'h6'

member hr

hr = 'hr'

member li

li = 'li'

member ol

ol = 'ol'

member p

p = 'p'

member pre

pre = 'pre'

member small

small = 'small'

member ul

ul = 'ul'

enum DataListWrapModifier

enum DataListWrapModifier {
    nowrap = 'nowrap',
    truncate = 'truncate',
    breakWord = 'breakWord',
}

member breakWord

breakWord = 'breakWord'

member nowrap

nowrap = 'nowrap'

member truncate

truncate = 'truncate'

enum DeviceSizes

enum DeviceSizes {
    sm = 'Sm',
    md = 'Md',
    lg = 'Lg',
    xl = 'Xl',
    xl2 = '_2xl',
}

member lg

lg = 'Lg'

member md

md = 'Md'

member sm

sm = 'Sm'

member xl

xl = 'Xl'

member xl2

xl2 = '_2xl'

enum DividerVariant

enum DividerVariant {
    hr = 'hr',
    li = 'li',
    div = 'div',
}

member div

div = 'div'

member hr

hr = 'hr'

member li

li = 'li'

enum DrawerColorVariant

enum DrawerColorVariant {
    default = 'default',
    secondary = 'secondary',
    noBackground = 'no-background',
}

member default

default = 'default'

member noBackground

noBackground = 'no-background'

Deprecated
DrawerColorVariant.noBackground is deprecated. Use the isPlain prop on DrawerPanelContent and the DrawerSectioninstead.

member secondary

secondary = 'secondary'

enum DrawerContentColorVariant

enum DrawerContentColorVariant {
    default = 'default',
    primary = 'primary',
    secondary = 'secondary',
}

member default

default = 'default'

member primary

primary = 'primary'

member secondary

secondary = 'secondary'

enum EmptyStateStatus

enum EmptyStateStatus {
    danger = 'danger',
    warning = 'warning',
    success = 'success',
    info = 'info',
    custom = 'custom',
}

member custom

custom = 'custom'

member danger

danger = 'danger'

member info

info = 'info'

member success

success = 'success'

member warning

warning = 'warning'

enum EmptyStateVariant

enum EmptyStateVariant {
    'xs' = 'xs',
    sm = 'sm',
    lg = 'lg',
    'xl' = 'xl',
    full = 'full',
}

member 'xl'

'xl' = 'xl'

member 'xs'

'xs' = 'xs'

member full

full = 'full'

member lg

lg = 'lg'

member sm

sm = 'sm'

enum ExpandableSectionVariant

enum ExpandableSectionVariant {
    default = 'default',
    truncate = 'truncate',
}

member default

default = 'default'

member truncate

truncate = 'truncate'

enum HelperTextItemVariant

enum HelperTextItemVariant {
    default = 'default',
    warning = 'warning',
    error = 'error',
    success = 'success',
}

member default

default = 'default'

member error

error = 'error'

member success

success = 'success'

member warning

warning = 'warning'

enum LabelColor

enum LabelColor {
    blue = 'blue',
    teal = 'teal',
    green = 'green',
    orange = 'orange',
    purple = 'purple',
    red = 'red',
    orangered = 'orangered',
    grey = 'grey',
    yellow = 'yellow',
}

Label palette color when not using the status prop.

member blue

blue = 'blue'

member green

green = 'green'

member grey

grey = 'grey'

member orange

orange = 'orange'

member orangered

orangered = 'orangered'

member purple

purple = 'purple'

member red

red = 'red'

member teal

teal = 'teal'

member yellow

yellow = 'yellow'

enum LabelStatus

enum LabelStatus {
    success = 'success',
    warning = 'warning',
    danger = 'danger',
    info = 'info',
    custom = 'custom',
}

Semantic status for labels (default icon and status styling).

member custom

custom = 'custom'

member danger

danger = 'danger'

member info

info = 'info'

member success

success = 'success'

member warning

warning = 'warning'

enum ListComponent

enum ListComponent {
    ol = 'ol',
    ul = 'ul',
}

member ol

ol = 'ol'

member ul

ul = 'ul'

enum ListVariant

enum ListVariant {
    inline = 'inline',
}

member inline

inline = 'inline'

enum MenuToggleSize

enum MenuToggleSize {
    default = 'default',
    sm = 'sm',
}

member default

default = 'default'

member sm

sm = 'sm'

enum MenuToggleStatus

enum MenuToggleStatus {
    success = 'success',
    danger = 'danger',
    warning = 'warning',
}

member danger

danger = 'danger'

member success

success = 'success'

member warning

warning = 'warning'

enum ModalVariant

enum ModalVariant {
    small = 'small',
    medium = 'medium',
    large = 'large',
    default = 'default',
}

member default

default = 'default'

member large

large = 'large'

member medium

medium = 'medium'

member small

small = 'small'

enum NotificationBadgeVariant

enum NotificationBadgeVariant {
    read = 'read',
    unread = 'unread',
    attention = 'attention',
    plain = 'plain',
}

member attention

attention = 'attention'

member plain

plain = 'plain'

member read

read = 'read'

member unread

unread = 'unread'

enum OrderType

enum OrderType {
    number = '1',
    lowercaseLetter = 'a',
    uppercaseLetter = 'A',
    lowercaseRomanNumber = 'i',
    uppercaseRomanNumber = 'I',
}

member lowercaseLetter

lowercaseLetter = 'a'

member lowercaseRomanNumber

lowercaseRomanNumber = 'i'

member number

number = '1'

member uppercaseLetter

uppercaseLetter = 'A'

member uppercaseRomanNumber

uppercaseRomanNumber = 'I'

enum PageLayouts

enum PageLayouts {
    vertical = 'vertical',
    horizontal = 'horizontal',
}

member horizontal

horizontal = 'horizontal'

member vertical

vertical = 'vertical'

enum PageSectionTypes

enum PageSectionTypes {
    default = 'default',
    subNav = 'subnav',
    breadcrumb = 'breadcrumb',
    tabs = 'tabs',
    wizard = 'wizard',
}

breadcrumb = 'breadcrumb'

member default

default = 'default'

member subNav

subNav = 'subnav'

member tabs

tabs = 'tabs'

member wizard

wizard = 'wizard'

enum PageSectionVariants

enum PageSectionVariants {
    default = 'default',
    secondary = 'secondary',
}

member default

default = 'default'

member secondary

secondary = 'secondary'

enum PaginationVariant

enum PaginationVariant {
    bottom = 'bottom',
    top = 'top',
}

member bottom

bottom = 'bottom'

member top

top = 'top'

enum PopoverPosition

enum PopoverPosition {
    auto = 'auto',
    top = 'top',
    bottom = 'bottom',
    left = 'left',
    right = 'right',
    topStart = 'top-start',
    topEnd = 'top-end',
    bottomStart = 'bottom-start',
    bottomEnd = 'bottom-end',
    leftStart = 'left-start',
    leftEnd = 'left-end',
    rightStart = 'right-start',
    rightEnd = 'right-end',
}

member auto

auto = 'auto'

member bottom

bottom = 'bottom'

member bottomEnd

bottomEnd = 'bottom-end'

member bottomStart

bottomStart = 'bottom-start'

member left

left = 'left'

member leftEnd

leftEnd = 'left-end'

member leftStart

leftStart = 'left-start'

member right

right = 'right'

member rightEnd

rightEnd = 'right-end'

member rightStart

rightStart = 'right-start'

member top

top = 'top'

member topEnd

topEnd = 'top-end'

member topStart

topStart = 'top-start'

enum ProgressMeasureLocation

enum ProgressMeasureLocation {
    outside = 'outside',
    inside = 'inside',
    top = 'top',
    none = 'none',
}

member inside

inside = 'inside'

member none

none = 'none'

member outside

outside = 'outside'

member top

top = 'top'

enum ProgressSize

enum ProgressSize {
    sm = 'sm',
    md = 'md',
    lg = 'lg',
}

member lg

lg = 'lg'

member md

md = 'md'

member sm

sm = 'sm'

enum ProgressStepVariant

enum ProgressStepVariant {
    default = 'default',
    pending = 'pending',
    success = 'success',
    info = 'info',
    danger = 'danger',
    warning = 'warning',
}

member danger

danger = 'danger'

member default

default = 'default'

member info

info = 'info'

member pending

pending = 'pending'

member success

success = 'success'

member warning

warning = 'warning'

enum ProgressVariant

enum ProgressVariant {
    danger = 'danger',
    success = 'success',
    warning = 'warning',
}

member danger

danger = 'danger'

member success

success = 'success'

member warning

warning = 'warning'

enum SidebarBackgroundVariant

enum SidebarBackgroundVariant {
    default = 'default',
    secondary = 'secondary',
}

member default

default = 'default'

member secondary

secondary = 'secondary'

enum SidebarPanelWidthType

enum SidebarPanelWidthType {
    default = 'default',
    width25 = 'width_25',
    width33 = 'width_33',
    width50 = 'width_50',
    width66 = 'width_66',
    width75 = 'width_75',
    width100 = 'width_100',
}

member default

default = 'default'

member width100

width100 = 'width_100'

member width25

width25 = 'width_25'

member width33

width33 = 'width_33'

member width50

width50 = 'width_50'

member width66

width66 = 'width_66'

member width75

width75 = 'width_75'

enum spinnerSize

enum spinnerSize {
    sm = 'sm',
    md = 'md',
    lg = 'lg',
    xl = 'xl',
}

member lg

lg = 'lg'

member md

md = 'md'

member sm

sm = 'sm'

member xl

xl = 'xl'

enum TabsComponent

enum TabsComponent {
    div = 'div',
    nav = 'nav',
}

member div

div = 'div'

member nav

nav = 'nav'

enum TextAreaReadOnlyVariant

enum TextAreaReadOnlyVariant {
    default = 'default',
    plain = 'plain',
}

member default

default = 'default'

member plain

plain = 'plain'

enum TextAreResizeOrientation

enum TextAreResizeOrientation {
    horizontal = 'horizontal',
    vertical = 'vertical',
    both = 'both',
    none = 'none',
}

member both

both = 'both'

member horizontal

horizontal = 'horizontal'

member none

none = 'none'

member vertical

vertical = 'vertical'

enum TextInputReadOnlyVariant

enum TextInputReadOnlyVariant {
    default = 'default',
    plain = 'plain',
}

member default

default = 'default'

member plain

plain = 'plain'

enum TextInputTypes

enum TextInputTypes {
    text = 'text',
    date = 'date',
    datetimeLocal = 'datetime-local',
    email = 'email',
    month = 'month',
    number = 'number',
    password = 'password',
    search = 'search',
    tel = 'tel',
    time = 'time',
    url = 'url',
}

member date

date = 'date'

member datetimeLocal

datetimeLocal = 'datetime-local'

member email

email = 'email'

member month

month = 'month'

member number

number = 'number'

member password

password = 'password'

member search

search = 'search'

member tel

tel = 'tel'

member text

text = 'text'

member time

time = 'time'

member url

url = 'url'

enum TimestampFormat

enum TimestampFormat {
    full = 'full',
    long = 'long',
    medium = 'medium',
    short = 'short',
}

member full

full = 'full'

member long

long = 'long'

member medium

medium = 'medium'

member short

short = 'short'

enum TimestampTooltipVariant

enum TimestampTooltipVariant {
    default = 'default',
    custom = 'custom',
}

member custom

custom = 'custom'

member default

default = 'default'

enum TitleSizes

enum TitleSizes {
    md = 'md',
    lg = 'lg',
    xl = 'xl',
    '2xl' = '2xl',
    '3xl' = '3xl',
    '4xl' = '4xl',
}

member '2xl'

'2xl' = '2xl'

member '3xl'

'3xl' = '3xl'

member '4xl'

'4xl' = '4xl'

member lg

lg = 'lg'

member md

md = 'md'

member xl

xl = 'xl'

enum ToolbarColorVariant

enum ToolbarColorVariant {
    default = 'default',
    primary = 'primary',
    secondary = 'secondary',
    noBackground = 'no-background',
}

member default

default = 'default'

member noBackground

noBackground = 'no-background'

member primary

primary = 'primary'

member secondary

secondary = 'secondary'

enum ToolbarGroupVariant

enum ToolbarGroupVariant {
    'filter-group' = 'filter-group',
    'action-group' = 'action-group',
    'action-group-inline' = 'action-group-inline',
    'action-group-plain' = 'action-group-plain',
    'label-group' = 'label-group',
}

member 'action-group-inline'

'action-group-inline' = 'action-group-inline'

member 'action-group-plain'

'action-group-plain' = 'action-group-plain'

member 'action-group'

'action-group' = 'action-group'

'filter-group' = 'filter-group'

member 'label-group'

'label-group' = 'label-group'

enum ToolbarItemVariant

enum ToolbarItemVariant {
    separator = 'separator',
    pagination = 'pagination',
    label = 'label',
    'label-group' = 'label-group',
    'expand-all' = 'expand-all',
}

member 'expand-all'

'expand-all' = 'expand-all'

member 'label-group'

'label-group' = 'label-group'

member label

label = 'label'

member pagination

pagination = 'pagination'

member separator

separator = 'separator'

enum TooltipPosition

enum TooltipPosition {
    auto = 'auto',
    top = 'top',
    bottom = 'bottom',
    left = 'left',
    right = 'right',
    topStart = 'top-start',
    topEnd = 'top-end',
    bottomStart = 'bottom-start',
    bottomEnd = 'bottom-end',
    leftStart = 'left-start',
    leftEnd = 'left-end',
    rightStart = 'right-start',
    rightEnd = 'right-end',
}

member auto

auto = 'auto'

member bottom

bottom = 'bottom'

member bottomEnd

bottomEnd = 'bottom-end'

member bottomStart

bottomStart = 'bottom-start'

member left

left = 'left'

member leftEnd

leftEnd = 'left-end'

member leftStart

leftStart = 'left-start'

member right

right = 'right'

member rightEnd

rightEnd = 'right-end'

member rightStart

rightStart = 'right-start'

member top

top = 'top'

member topEnd

topEnd = 'top-end'

member topStart

topStart = 'top-start'

enum TruncatePosition

enum TruncatePosition {
    start = 'start',
    end = 'end',
    middle = 'middle',
}

member end

end = 'end'

member middle

middle = 'middle'

member start

start = 'start'

enum ValidatedOptions

enum ValidatedOptions {
    success = 'success',
    error = 'error',
    warning = 'warning',
    default = 'default',
}

member default

default = 'default'

member error

error = 'error'

member success

success = 'success'

member warning

warning = 'warning'

enum Weekday

enum Weekday {
    Sunday = 0,
    Monday = 1,
    Tuesday = 2,
    Wednesday = 3,
    Thursday = 4,
    Friday = 5,
    Saturday = 6,
}

member Friday

Friday = 5

member Monday

Monday = 1

member Saturday

Saturday = 6

member Sunday

Sunday = 0

member Thursday

Thursday = 4

member Tuesday

Tuesday = 2

member Wednesday

Wednesday = 3

enum WizardNavItemStatus

enum WizardNavItemStatus {
    Default = 'default',
    Error = 'error',
    Success = 'success',
    Warning = 'warning',
}

member Default

Default = 'default'

member Error

Error = 'error'

member Success

Success = 'success'

member Warning

Warning = 'warning'

enum WizardStepChangeScope

enum WizardStepChangeScope {
    Next = 'next',
    Back = 'back',
    Nav = 'nav',
}

member Back

Back = 'back'

member Nav

Nav = 'nav'

member Next

Next = 'next'

Type Aliases

type BannerColor

type BannerColor =
    | 'red'
    | 'orangered'
    | 'orange'
    | 'yellow'
    | 'green'
    | 'teal'
    | 'blue'
    | 'purple';

type BannerStatus

type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';

type CustomWizardFooterFunction

type CustomWizardFooterFunction = (
    activeStep: WizardStepType,
    onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,
    onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,
    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>
) => React.ReactElement<WizardFooterProps>;

Callback for the Wizard's 'footer' property. Returns element which replaces the Wizard's default footer.

type CustomWizardNavFunction

type CustomWizardNavFunction = (
    isExpanded: boolean,
    steps: WizardStepType[],
    activeStep: WizardStepType,
    goToStepByIndex: (index: number) => void
) => React.ReactElement<WizardNavProps>;

Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation.

type CustomWizardNavItemFunction

type CustomWizardNavItemFunction = (
    step: WizardStepType,
    activeStep: WizardStepType,
    steps: WizardStepType[],
    goToStepByIndex: (index: number) => void
) => React.ReactElement<WizardNavItemProps>;

Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navigation item.

type DropdownPopperProps

type DropdownPopperProps = PopperOptions;

Deprecated
Use PopperOptions instead

type DropEvent

type DropEvent =
    | React.DragEvent<HTMLElement>
    | React.ChangeEvent<HTMLInputElement>
    | DragEvent
    | Event;

type gridItemSpanValueShape

type gridItemSpanValueShape = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

type gridSpans

type gridSpans = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

type IconSize

type IconSize =
    | 'sm'
    | 'md'
    | 'lg'
    | 'xl'
    | '2xl'
    | '3xl'
    | 'headingSm'
    | 'headingMd'
    | 'headingLg'
    | 'headingXl'
    | 'heading_2xl'
    | 'heading_3xl'
    | 'bodySm'
    | 'bodyDefault'
    | 'bodyLg';

type MenuPopperProps

type MenuPopperProps = PopperOptions;

Deprecated
Use PopperOptions instead

type MenuToggleElement

type MenuToggleElement = HTMLDivElement | HTMLButtonElement;

type NavSelectClickHandler

type NavSelectClickHandler = (
    event: React.FormEvent<HTMLInputElement>,
    itemId: number | string,
    groupId: number | string,
    to: string
) => void;

type OnPerPageSelect

type OnPerPageSelect = (
    event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
    newPerPage: number,
    newPage: number,
    startIdx?: number,
    endIdx?: number
) => void;

type OnSetPage

type OnSetPage = (
    event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
    newPage: number,
    perPage?: number,
    startIdx?: number,
    endIdx?: number
) => void;

type OptionalKeys

type OptionalKeys<T> = {
    [K in keyof T]-?: {} extends {
        [P in K]: T[K];
    }
        ? K
        : never;
}[keyof T];

type PickAndRequireOptional

type PickAndRequireOptional<T> = Required<Pick<T, OptionalKeys<T>>>;

type PickOptional

type PickOptional<T> = Pick<T, OptionalKeys<T>>;

type RequiredKeys

type RequiredKeys<T> = {
    [K in keyof T]-?: {} extends {
        [P in K]: T[K];
    }
        ? never
        : K;
}[keyof T];

type SelectPopperProps

type SelectPopperProps = PopperOptions;

Deprecated
Use PopperOptions instead

type SliderOnChangeEvent

type SliderOnChangeEvent =
    | React.MouseEvent
    | React.KeyboardEvent
    | React.FormEvent<HTMLInputElement>
    | React.TouchEvent
    | React.FocusEvent<HTMLInputElement>;

type WizardFooterButtonProps

type WizardFooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;

Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps.

type WizardFooterType

type WizardFooterType =
    | Partial<WizardFooterProps>
    | CustomWizardFooterFunction
    | React.ReactElement<any>;

type WizardNavItemType

type WizardNavItemType =
    | Partial<WizardNavItemProps>
    | CustomWizardNavItemFunction
    | React.ReactElement<any>;

type WizardNavType

type WizardNavType =
    | Partial<WizardNavProps>
    | CustomWizardNavFunction
    | React.ReactElement<any>;

type WizardStepType

type WizardStepType = WizardBasicStep | WizardParentStep | WizardSubStep;

Encompasses all step type variants that are internally controlled by the Wizard.

Namespaces

namespace *.svg

module '*.svg' {}

variable content

const content: string;

Package Files (313)

Dependencies (6)

Dev Dependencies (4)

Peer Dependencies (2)

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/@patternfly/react-core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@patternfly/react-core)

HTML

<a href="https://www.jsdocs.io/package/@patternfly/react-core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 3 seconds ago.
Package analyzed in 23063 ms.
Missing or incorrect documentation? Open an issue for this package.

@patternfly/react-core

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable AboutModal

variable Accordion

variable AccordionContent

variable AccordionExpandableContentBody

variable AccordionItem

variable AccordionToggle

variable ActionGroup

variable ActionList

variable ActionListGroup

variable ActionListItem

variable Alert

variable AlertActionCloseButton

variable AlertActionLink

variable AlertContext

variable AlertGroup

variable AnimationsProvider

Example 1

variable ASTERISK

variable Avatar

variable Backdrop

variable BackgroundImage

variable BackToTop

variable Badge

variable Banner

variable Brand

variable Breadcrumb

variable BreadcrumbHeading

variable BreadcrumbItem

variable Bullseye

variable Button

variable CalendarMonth

variable canUseDOM

variable Card

variable CardBody

variable CardContext

variable CardExpandableContent

variable CardFooter

variable CardHeader

variable CardTitle

variable ClipboardCopyAction

variable ClipboardCopyButton

variable CodeBlock

variable CodeBlockAction

variable CodeBlockCode

variable Compass

variable CompassContent

variable CompassDockMain

variable CompassHeader

variable CompassHero

variable CompassMainFooter

variable CompassMainHeader

variable CompassMainHeaderContent

variable CompassMainHeaderTitle

variable CompassMainHeaderToolbar

variable CompassMessageBar

variable CompassNavContent

variable CompassNavHome

variable CompassNavMain

variable CompassNavSearch

variable Content

variable DataList

variable DataListAction

variable DataListBase

variable DataListCell

variable DataListCheck

variable DataListContent

variable DataListContext

variable DataListControl