Prop Type Required Description status "info" | "success" | "warning" | "error"No The visual status that the alert should convey label stringYes The label text for the alert children React.ReactNodeNo Optional children to be rendered inside the alert icon React.ReactNodeNo Optional custom icon component to override the default icon className stringNo CSS className to be applied onDismiss () => voidNo Optional callback function called when the dismiss button is clicked disableScrollIntoView booleanNo Whether to disable scrolling the alert into view and focusing it on mount. Set to true when using inside modals.
Prop Type Required Description children React.ReactNodeYes Content to be displayed inside the badge status "info" | "success" | "warning" | "error"No Visual style variant of the badge className stringNo - id stringNo - aria-label stringNo Defines a string value that labels the current element.
Prop Type Required Description title React.ReactNodeYes Title content displayed in the colored header section children React.ReactNodeYes Content to be displayed in the main content area status "warning" | "error"No Visual status variant of the banner className stringNo - id stringNo - aria-label stringNo Defines a string value that labels the current element.
Prop Type Required Description items React.ReactNode[]Yes The list items to render className stringNo Optional custom class name aria-label stringNo Accessibility label for the list aria-labelledby stringNo ID of an element that labels this list aria-describedby stringNo ID of an element that describes this list
Prop Type Required Description breadcrumbs Breadcrumb []Yes Array of breadcrumbs currentBreadcrumbId stringNo Current breadcrumb id aria-label stringNo Accessibility label for the breadcrumbs className stringNo Additional CSS class name for the breadcrumbs container onClick (id: string) => voidNo Event handler for breadcrumb navigation isSmallContainer booleanNo Passed to the breadcrumbs when the container size is small (640px and below) At this size, the breadcrumb typically does not have sufficient size to render completely. In our implementation, we switch to a condensed mobile version of the breadcrumbs
Prop Type Required Description id stringYes - label React.ReactNodeYes -
Prop Type Required Description buttonRef Ref<HTMLButtonElement | null>No React ref for the button element variant "error" | "primary" | "secondary" | "tertiary"No Visual style variant of the button isLoading booleanNo Shows a loading spinner and disables the button isDisabled booleanNo Disables the button and prevents interaction children React.ReactNodeNo Content to be rendered inside the button onBlur (e: React.FocusEvent<Element, Element>) => voidNo Handler for blur events onFocus (e: React.FocusEvent<Element, Element>) => voidNo Handler for focus events className stringNo - id stringNo - onKeyDown React.KeyboardEventHandler<HTMLButtonElement>No - onKeyUp React.KeyboardEventHandler<HTMLButtonElement>No - aria-label stringNo Defines a string value that labels the current element. aria-labelledby stringNo Identifies the element (or elements) that labels the current element. aria-describedby stringNo Identifies the element (or elements) that describes the object. title stringNo - name stringNo - type "submit" | "reset" | "button"No - onClick React.MouseEventHandler<HTMLButtonElement>No - form stringNo - tabIndex numberNo -
Prop Type Required Description buttonRef Ref<HTMLButtonElement | null>No React ref for the button element variant "error" | "primary" | "secondary" | "tertiary"No Visual style variant of the button isLoading booleanNo Shows a loading spinner and disables the button isDisabled booleanNo Disables the button and prevents interaction children React.ReactNodeNo Content to be rendered inside the button onBlur (e: React.FocusEvent<Element, Element>) => voidNo Handler for blur events onFocus (e: React.FocusEvent<Element, Element>) => voidNo Handler for focus events className stringNo - id stringNo - onKeyDown React.KeyboardEventHandler<HTMLButtonElement>No - onKeyUp React.KeyboardEventHandler<HTMLButtonElement>No - aria-label stringNo Defines a string value that labels the current element. aria-labelledby stringNo Identifies the element (or elements) that labels the current element. aria-describedby stringNo Identifies the element (or elements) that describes the object. title stringNo - name stringNo - type "submit" | "reset" | "button"No - onClick React.MouseEventHandler<HTMLButtonElement>No - form stringNo - tabIndex numberNo -
Prop Type Required Description highlightDates { date: Date; highlightColor: "primary" | "secondary"; label: string; }[]No Array of dates to highlight with custom colors and labels dateRange { start: Date; end: Date; label: string; }Yes Date range to display in the calendar preview
Prop Type Required Description onSelect (checked: boolean) => voidNo Callback function when the card is selected children React.ReactNodeYes Content to be displayed inside the card menu React.ReactNodeNo Optional menu component to be displayed on the right side of the card className stringNo CSS className to be applied
Prop Type Required Description isInvalid booleanNo Indicates if the checkbox group is in an invalid state isDisabled booleanNo Disables all checkbox options in the group options CheckboxGroupOption []Yes Array of checkbox options to display value string[]No Array of currently selected values onChange (value: string[]) => voidNo Callback when selection changes inputRef Ref<HTMLInputElement | null>No React ref for the first checkbox input element description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo -
Prop Type Required Description label React.ReactNodeYes Label text or content for the checkbox option value stringYes Value of the option that will be passed to onChange isDisabled booleanNo Disables this specific checkbox option description React.ReactNodeNo Optional description text for the checkbox option
Prop Type Required Description value booleanNo Current checked state of the checkbox onChange (value: boolean) => voidNo Callback when checkbox state changes inputRef Ref<HTMLInputElement | null>No React ref for the checkbox input element isInvalid booleanNo Indicates if the checkbox is in an invalid state isDisabled booleanNo Disables the checkbox and prevents interaction onBlur () => voidNo Handler for blur events description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo -
Prop Type Required Description isDisabled booleanNo Disables the combo box and prevents interaction isInvalid booleanNo Indicates that the field has an error label stringYes Label text for the combo box field onChange (value: string) => voidNo Callback when selection changes onBlur () => voidNo Handler for blur events options ComboBoxOption []Yes Array of options to display in the dropdown value stringNo Currently selected value inputRef Ref<HTMLInputElement | null>No React ref for the combo box input element description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo - placeholder stringNo -
Prop Type Required Description label stringYes Display text for the option value stringYes Value of the option that will be passed to onChange
Prop Type Required Description inputRef Ref<HTMLInputElement | null>No React ref for the date input element isDisabled booleanNo Disables the date picker and prevents interaction isInvalid booleanNo Indicates that the field has an error onChange (value: Date | null) => voidNo Callback when selected date changes onBlur () => voidNo Handler for blur events label stringYes Label text for the date picker field value null | DateNo Currently selected date value placeholder stringNo Placeholder text when no date is selected portalContainer HTMLElementNo Element to use as the portal container description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo -
Prop Type Required Description term React.ReactNode | React.ReactNode[]Yes - description React.ReactNode | React.ReactNode[]Yes -
Prop Type Required Description isOpen booleanNo Controls whether the dialog is open or closed onClose () => voidNo Callback function called when the dialog should be closed onPrimaryActionClick () => voidNo Callback function called when the primary action button is clicked isDestructive booleanNo Whether the primary action is destructive (changes button style to error variant) isPrimaryActionLoading booleanNo Whether the primary action button is in loading state primaryActionLabel stringYes Text label for the primary action button closeActionLabel stringYes Text label for the close/cancel action button title React.ReactNodeNo Optional title content to be displayed at the top of the dialog children React.ReactNodeNo Optional children content to be rendered in the dialog body shouldCloseOnBackdropClick booleanNo Whether clicking the backdrop should close the dialog
Prop Type Required Description as "h1" | "h2" | "h3" | "h4" | "h5" | "h6"Yes The HTML heading element to render (h1-h6) styledAs "h1" | "h2" | "h3" | "h4" | "h5" | "h6"No Optional visual style to apply, independent of the semantic heading level textAlign "start" | "center" | "end"No Text alignment within the heading children React.ReactNodeNo Content to be displayed inside the heading className stringNo -
Prop Type Required Description href stringNo - target "_self" | "_blank" | "_parent" | "_top" | stringNo - rel stringNo - download anyNo - className stringNo - id stringNo - onKeyDown React.KeyboardEventHandler<HTMLAnchorElement>No - onKeyUp React.KeyboardEventHandler<HTMLAnchorElement>No - aria-label stringNo Defines a string value that labels the current element. aria-labelledby stringNo Identifies the element (or elements) that labels the current element. aria-describedby stringNo Identifies the element (or elements) that describes the object. title stringNo - children React.ReactNodeNo Content to be displayed inside the link
Prop Type Required Description size "lg" | "sm"No Size of the spinner style "inline" | "block"No Display style of the spinner className stringNo - id stringNo - aria-label stringNo Defines a string value that labels the current element.
Prop Type Required Description triggerRef RefObjectNo Reference to the element that triggers the menu items MenuItem []No Array of menu items to display isOpen booleanNo Controls whether the menu is currently open onClose () => voidNo Callback when the menu is closed aria-label stringYes Accessible label describing the menu's purpose
Prop Type Required Description label stringYes Text label for the menu item icon React.ReactNodeNo Optional icon to display before the label onClick () => voidYes Callback function when the menu item is clicked isDisabled booleanNo Disables the menu item and prevents interaction href stringNo Optional URL to navigate to when clicked
Prop Type Required Description isOpen booleanNo Controls whether the modal is open or closed onClose () => voidNo Callback function called when the modal should be closed shouldCloseOnBackdropClick booleanNo Whether clicking the backdrop should close the modal children React.ReactNodeNo Main content to be rendered in the modal body footer React.ReactNodeNo Footer content to be rendered at the bottom of the modal containerRef RefObjectNo Optional ref to the backdrop container
Prop Type Required Description format "currency" | "decimal" | "percent"No Format type for the number input inputRef Ref<HTMLInputElement | null>No React ref for the number input element value numberNo Current value of the number input isInvalid booleanNo Indicates that the field has an error isDisabled booleanNo Disables the number input and prevents interaction onChange (value: number) => voidNo Callback when number input value changes onBlur () => voidNo Handler for blur events adornmentStart React.ReactNodeNo Element to display at the start of the input adornmentEnd React.ReactNodeNo Element to display at the end of the input minimumFractionDigits numberNo Minimum number of decimal places to display maximumFractionDigits numberNo Maximum number of decimal places to display description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo - placeholder stringNo - min string | numberNo - max string | numberNo -
The props for this component are defined in BaseListProps .
Prop Type Required Description handleFirstPage () => voidYes - handlePreviousPage () => voidYes - handleNextPage () => voidYes - handleLastPage () => voidYes - handleItemsPerPageChange (n: PaginationItemsPerPage ) => void Yes - currentPage numberYes - totalPages numberYes - itemsPerPage 5 | 10 | 50No - isFetching booleanNo -
TypeScript
type PaginationItemsPerPage = 5 | 10 | 50Prop Type Required Description totalSteps numberYes Total number of steps in the progress sequence currentStep numberYes Current step in the progress sequence className stringNo Additional CSS class name for the progress bar container label stringYes Accessible label describing the progress bar's purpose cta React.ComponentType | nullNo Component to render as the progress bar's CTA
Prop Type Required Description isInvalid booleanNo Indicates that the field has an error isDisabled booleanNo Disables all radio options in the group options RadioGroupOption []Yes Array of radio options to display value stringNo Currently selected value defaultValue stringNo Initially selected value onChange (value: string) => voidNo Callback when selection changes inputRef Ref<HTMLInputElement | null>No React ref for the first radio input element description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo -
Prop Type Required Description label React.ReactNodeYes Label text or content for the radio option value stringYes Value of the option that will be passed to onChange isDisabled booleanNo Disables this specific radio option description React.ReactNodeNo Optional description text for the radio option
Prop Type Required Description value booleanNo Current checked state of the radio button onChange (checked: boolean) => voidNo Callback when radio button state changes inputRef Ref<HTMLInputElement | null>No React ref for the radio input element isInvalid booleanNo Indicates that the field has an error isDisabled booleanNo Disables the radio button and prevents interaction description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo - onBlur React.FocusEventHandler<HTMLInputElement>No -
Prop Type Required Description isDisabled booleanNo Disables the select and prevents interaction isInvalid booleanNo Indicates that the field has an error label stringYes Label text for the select field onChange (value: string) => voidNo Callback when selection changes onBlur () => voidNo Handler for blur events options SelectOption []Yes Array of options to display in the select dropdown placeholder stringNo Placeholder text when no option is selected value stringNo Currently selected value inputRef Ref<HTMLButtonElement | null>No React ref for the select button element portalContainer HTMLElementNo Element to use as the portal container description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo -
Prop Type Required Description value stringYes Value of the option that will be passed to onChange label stringYes Display text for the option
Prop Type Required Description onBlur () => voidNo Handler for blur events onChange (checked: boolean) => voidNo Callback when switch state changes value booleanNo Current checked state of the switch inputRef Ref<HTMLInputElement | null>No React ref for the switch input element isInvalid booleanNo Indicates that the field has an error isDisabled booleanNo Disables the switch and prevents interaction className stringNo Additional CSS class name for the switch container label stringYes Label text for the switch description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers id stringNo - name stringNo -
Prop Type Required Description headers TableData []Yes Array of header cells for the table rows TableRow []Yes Array of rows to be displayed in the table footer TableData []No Array of footer cells for the table emptyState React.ReactNodeNo Content to display when the table has no rows variant "default" | "minimal"No Visual style variant of the table hasCheckboxColumn booleanNo Whether the first column contains checkboxes (affects which column gets leading variant) className stringNo - id stringNo - aria-label stringNo Defines a string value that labels the current element. aria-labelledby stringNo Identifies the element (or elements) that labels the current element. aria-describedby stringNo Identifies the element (or elements) that describes the object. role "form" | "button" | "alert" | "alertdialog" | "application" | "article" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | stringNo -
Prop Type Required Description key stringYes Unique identifier for the table cell content React.ReactNodeYes Content to be displayed in the table cell
Prop Type Required Description key stringYes Unique identifier for the table row data TableData []Yes Array of cells to be displayed in the row
Prop Type Required Description tabs TabProps []Yes Array of tab configuration objects selectedId stringNo Currently selected tab id onSelectionChange (id: string) => voidYes Callback when tab selection changes aria-label stringNo Accessible label for the tabs aria-labelledby stringNo ID of element that labels the tabs className stringNo Additional CSS class name
Prop Type Required Description id stringYes Unique identifier for the tab label React.ReactNodeYes Label to display in the tab button content React.ReactNodeYes Content to display in the tab panel isDisabled booleanNo Whether the tab is disabled
Prop Type Required Description inputRef Ref<HTMLTextAreaElement | null>No React ref for the textarea element value stringNo Current value of the textarea onChange (value: string) => voidNo Callback when textarea value changes isInvalid booleanNo Indicates that the field has an error isDisabled booleanNo Disables the textarea and prevents interaction onBlur () => voidNo Handler for blur events description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo - placeholder stringNo - rows numberNo - cols numberNo - aria-describedby stringNo Identifies the element (or elements) that describes the object.
Prop Type Required Description inputRef Ref<HTMLInputElement | null>No React ref for the input element value stringNo Current value of the input onChange (value: string) => voidNo Callback when input value changes isInvalid booleanNo Indicates that the field has an error isDisabled booleanNo Disables the input and prevents interaction onBlur () => voidNo Handler for blur events adornmentStart React.ReactNodeNo Element to display at the start of the input adornmentEnd React.ReactNodeNo Element to display at the end of the input description React.ReactNodeNo Optional description text for the field errorMessage stringNo Error message to display when the field is invalid isRequired booleanNo Indicates if the field is required label React.ReactNodeYes Label text for the field shouldVisuallyHideLabel booleanNo Hides the label visually while keeping it accessible to screen readers className stringNo - id stringNo - name stringNo - type "number" | "submit" | "reset" | "button" | "checkbox" | "radio" | "search" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "password" | "range" | "tel" | "text" | "time" | "url" | "week" | stringNo - placeholder stringNo - aria-describedby stringNo Identifies the element (or elements) that describes the object.
Prop Type Required Description as "p" | "span" | "div" | "pre"No HTML element to render the text as size "lg" | "sm" | "xs" | "md"No Size variant of the text textAlign "start" | "center" | "end"No Text alignment within the container weight "regular" | "medium" | "semibold" | "bold"No Font weight of the text children React.ReactNodeNo Content to be displayed variant "supporting" | "leading"No Visual style variant of the text className stringNo - id stringNo -
The props for this component are defined in BaseListProps .
