| AddButton({ buttonText, onClick, shortcut, macShortcut, ...props }) | Add button component |
| AddListButton({ buttonText, onButtonClick, disabled, icon, variant, theme, ...buttonProps }) | Uniform Add List Button Component |
| addPathSegmentToPathname(path, pathSegment) | Joins different variants of parent relative url with path segment. Path can be "", "/" and "/foo/bar" |
| AsideAndSectionLayout({ sidebar, children, isStickyAside, }) | |
| Avatar({ src, label, children, size, as, labelWithoutPortal, ...props }) | A component to render rounded avatars of a user or an app. |
| AvatarGroup({ max, children, getTruncatedLabel, truncatedProps, ...props }) | Renders avatars in a group with the ability to truncate the list. This component works best when the <Avatar> component are direct children. |
| Banner({ type, onDismiss, children, isAnimated, ...props }) | Uniform Banner Component |
| buttonRippleEffect(props) | |
| ButtonWithMenu({ onButtonClick, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, portal, maxMenuHeight, tooltip, shortcut, buttonType, ...buttonProps }) | |
| Calendar({ value, timeZone, minValue, maxValue, onChange, styles: stylesProp, autoFocus, isDisabled, isInvalid, isReadOnly, withTodayButton, isDateUnavailable, ...props }) | A Calendar Grid which allows the user to navigate and select a date. |
| Callout({ type, compact, title, children, className, testId, }) | Uniform Callout Component |
| Caption({ children, testId, dynamicSize, ...props }) | Component that provides caption text to input fields |
| Card({ title, menuItems, children, titleWithMarginBottom, disabled, tag: Tag, menuButtonTestId, ...props }) | |
| CardContainer({ bgColor, padding, withLastColumn, children, ...props }) | Uniform Card Container |
| CardTitle({ title, titleWithMarginBottom, children }) | |
| Chip({ icon, iconColor, text, size, theme, variant, chipAction, isDisabled, as, ...props }) | Chips are used in a variety of ways To represent tokens, where the value of the chip will be replaced with something dynamically. To represent tags or important metadata about an object To represent a different object, as a reference |
| Container({ tag, backgroundColor, border, rounded, padding, margin, children, ...props }) | |
| convertComboBoxGroupsToSelectableGroups(args) | Converts combo box options that can contain optgroups Into a set of group-less options where the optgroup becomes a selectable option, and selecting it selects all of its children. |
| Counter({ count, bgColor, icon, iconColor, size, ...props }) | |
| cq(size) | Container Query Helper Function |
| CreateTeamIntegrationTile({ title, buttonText, onClick, asDeepLink, ...props }) | |
| DashedBox({ bgColor, textAlign, boxHeight, children, ...props }) | Uniform Dashed Box Component |
| DateTimePicker({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, compact, ...props }) | <p>Date Time Picker This is a Calendar, Time input and TimeZone selector housed in a popup. You can use it to pick a date as well as a time, or you can also change it to only pick a date.</p><p>Subcomponents can manipulate the value directly by using the <code>useDateTimePickerContext()</code> hook.</p> |
| DateTimePickerSummary({ value, placeholder, }) | |
| debounce(fn, ms) | |
| Details({ summary, children, isOpenByDefault, isOpen, isIndented, isCompact, onChange, ...props }) | |
| DismissibleChipAction({ onDismiss, ...props }) | Dismissible chip action should be used with the Chip component |
| DrawerContent({ children, buttonGroup, noPadding, ...props }) | |
| DrawerProvider({ children }) | Provides the context to the Drawer and DrawerRenderer components. |
| DrawerRenderer({ stackId, position, width, minWidth, maxWidth, leftAligned, withoutFluidWidth, ...otherProps }) | Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood. DrawerProvider - Must be rendered inside a <code><DrawerProvider></code>. |
| EditTeamIntegrationTile({ id, icon, name, onEdit, isPublic, canEdit, }) | Uniform Edit Team Integration Tile |
| ErrorMessage({ message, testId, truncated, ...otherProps }) | Component that provides error messaging to input fields |
| extractParameterProps(props) | A function that extracts all common props and element props |
| FieldMessage({ helperMessage, warningMessage, errorMessage, infoMessage, errorTestId, helperMessageTestId, }) | |
| FlexiCard({ heading, children, width, height, maxHeight, ...props }) | |
| FlexiCardTitle({ icon, heading, ...props }) | Flexi Card Title Component recommended to be used within the FlexiCard component |
| getButtonSize(size) | |
| getButtonStyles({ size, ...props }) | |
| getComboBoxSelectedSelectableGroups(selectedValues) | Finds all selected values in a combo box where there are multiple selectable groups (and selecting a group should select all of its virtual children) |
| getDrawerAttributes({ providerId, stackId, id, }) | |
| getFormattedShortcut(shortcut) | <p>Gets a formatted version of a shortcut for display.</p><p>i.e. converts "mod+alt+n" to "['⌘', '⌥', 'N']" on macs, or ['^', 'Alt', 'N'] on windows.</p> |
| getParentPath(path, noRootSlash) | |
| getPathSegment(path) | |
| Heading({ level, as, withMarginBottom, children, ...hAttributes }) | Component that sets the heading tag |
| HexModalBackground({ ...props }) | |
| HorizontalRhythm({ align, justify, tag, gap, children, ref, ...props }) | |
| IconsProvider({ children }) | Provider to the Icon component |
| Image_2({ alt, src, srcSet, className, imgClassName, variant, width, height, errorFallbackSrc, ...imgAttribs }) | |
| ImageBroken({ width, height, ...props }) | |
| InfoMessage({ message, testId, icon, ...props }) | Component that provides info messaging to input fields |
| input(whiteSpaceWrap) | |
| InputComboBox(props) | InputComboBox |
| InputCreatableComboBox(props) | InputCreatableComboBox Like ComboBox, but allows for creating new options |
| InputInlineSelect({ classNameContainer, options, value, onChange, disabled, ...props }) | Input Inline Select |
| IntegrationComingSoon({ name, icon, id, onUpVoteClick, timing, ...props }) | Uniform Integration Coming Soon Component |
| IntegrationLoadingTile({ count }) | Uniform Integration Loading Tile |
| IntegrationModalHeader({ icon, name, menu, children }) | Uniform Integration Modal Header |
| IntegrationModalIcon({ icon, name, ...imgProps }) | Uniform Integration Modal Icon |
| IntegrationTile({ id, icon, name, requiedEntitlement, onAddIntegration, isPublic, isInstalled, authorIcon, ...btnProps }) | |
| isSecureURL(value) | |
| isValidUrl(urlString, options) | |
| JsonEditor({ defaultValue, onChange, jsonSchema, height, readOnly }) | |
| KeyValueInput({ value, onChange, label, newItemDefault, keyLabel, valueLabel, iconLabel, keyInfoPopover, valueInfoPopover, iconInfoPopover, disabled, errors, onFocusChange, showIconColumn, renderIconSelector, independentKeyValue, }) | A component to render a sortable key-value input |
| Label({ children, className, testId, ...props }) | |
| LabelLeadingIcon({ icon, iconColor, children, isActive, isLocked, title, ...props }) | |
| LabelsQuickFilter({ buttonText, addButtonText, items, selectedIds, onSelect, onDeselect, disabled, testId, totalResults, onCreateLabel, withoutPortal, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, maxCount, }) | A reusable quick filter component for selecting labels with swatch colors. Supports flat labels and grouped labels with nested menus. |
| Legend({ children }) | |
| LimitsBar({ current, max, popoverContent, barColor, ...props }) | Uniform Limits Bar Component |
| LinkList({ title, children, ...props }) | |
| LoadingCardSkeleton() | |
| LoadingIcon({ height, width, ...props }) | Loading Icon |
| LoadingIndicator({ size, color, ...props }) | Loading Indicator |
| LoadingOverlay({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, position, }) | Loading Overlay. NOTE: the container/parent element must have a non-static <code>position</code> value for the overlay to work properly. |
| MenuGroup({ title, children }) | |
| MenuItemEmptyIcon() | Indents a menu item as if it had an icon when it does not Use this to align menu items without icons with those that have icons in a mixed menu. Intended to be passed as the <code>icon</code> prop to a MenuItem. |
| MenuItemIcon({ icon, size }) | Renders an icon for a menu item. Optional micro wrapper around an Icon component configured to match the menu item icon style. |
| MenuItemSeparator({ ...props }) | |
| mq(size, bound) | Media Query Helper Function |
| MultilineChip({ children, onClick, ...props }) | A chip specifically designed to fit as a chipped element in an multi-line capable content field. Unlike a regular chip, this one can go onto multiple lines with word wrap, and uses inline behaviours. |
| ObjectGridItem({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, ...props }) | <p>A card-style grid item for displaying an object with cover media, heading, subtitle, and optional context menu.</p><p>When an <code>onClick</code> handler is provided, the entire card becomes clickable with hover styles. Menu and right-slot interactions use <code>stopPropagation</code> to prevent triggering the card click. Wrap items with ObjectGridContainer for responsive grid layout.</p> |
| ObjectGridItemCardCover(props) | Low-level cover media for a grid card — renders either a lazy-loaded image or an icon with a ghost background. Typically used via ObjectGridItemCover() rather than directly. |
| ObjectGridItemCover({ coverSlotLeft, coverSlotRight, coverSlotBottomLeft, coverSlotBottomRight, ...props }) | Grid item cover with corner overlay slots for badges, checkboxes, or status indicators. Wraps ObjectGridItemCardCover() and positions slot content at each corner. |
| ObjectGridItemCoverButton({ id, isSelected, onSelection, selectedText, coverSlotBottomRight, ...props }) | Clickable variant of ObjectGridItemCover() that acts as a selection toggle. When selected, a chip with <code>selectedText</code> appears in the bottom-right corner. Click events are stopped from propagating to parent elements. |
| ObjectGridItemHeading({ heading, beforeHeadingSlot, afterHeadingSlot, tooltip, ...props }) | <p>Heading component designed for use inside ObjectGridItem()'s <code>header</code> slot.</p><p>Automatically detects when the heading text is truncated (via a <code>ResizeObserver</code>) and shows the <code>tooltip</code> on hover so users can still read the full title. Click events on <code>beforeHeadingSlot</code> and <code>afterHeadingSlot</code> are stopped from propagating to the parent grid item.</p> |
| ObjectGridItemIconWithTooltip({ tooltipTitle, placement, icon, iconColor, ...props }) | Small icon with a tooltip, designed for the <code>rightSlot</code> of ObjectGridItem(). Useful for showing contextual indicators (e.g. entry type, locale) without taking up text space. |
| ObjectGridItemLoadingSkeleton() | Animated skeleton placeholder for ObjectGridItem(), displayed while data is loading. Renders a simulated cover image and two text lines matching the visual dimensions of a real grid card so the layout doesn't shift on load. |
| ObjectItemLoadingSkeleton({ showCover, renderAs, }) | Animated skeleton placeholder for ObjectListItem(), displayed while data is loading. Matches the visual dimensions of a real list item so the layout doesn't shift on load. |
| ObjectListItem({ minContainerQueryWidth, ...props }) | <p>A horizontal list item for displaying an object with header, cover, right slot, and optional context menu.</p><p>Uses container queries so the layout adapts to its parent width rather than the viewport. Wrap items with ObjectListItemContainer() to get proper list semantics and dividers.</p> |
| ObjectListItemContainer({ children, gap, ...props }) | Vertical container that wraps ObjectListItem() elements with <code>role="list"</code> semantics and renders a top-border divider between each item. |
| ObjectListItemCover({ imageUrl, noImageText, icon, ...props }) | Thumbnail cover image for use inside ObjectListItem()'s <code>cover</code> slot. Renders a fixed-size (80×45) container with a lazy-loaded image, or a text placeholder when no <code>imageUrl</code> is available. |
| ObjectListItemHeading({ heading, beforeHeadingSlot, afterHeadingSlot, headingTestId, ...props }) | <p>Heading component designed for use inside ObjectListItem()'s <code>header</code> slot.</p><p>Renders a responsive heading row that stacks vertically on narrow containers and switches to a horizontal layout at wider widths (controlled by a container query).</p> |
| ObjectListSubText({ children, ...props }) | |
| PageHeaderSection({ title, desc, children, linkText, level, linkProps, linkManagerComponent, ...htmlProps }) | |
| Pagination({ limit, offset, total, onPageChange, }) | |
| Paragraph({ className, htmlContent, children, ...pAttributes }) | Component for generic paragraph tags |
| ParameterActionButton({ children, themeType, tooltip, tooltipProps, renderAs, disabled, ...props }) | |
| ParameterDrawerHeader({ title, iconBeforeTitle, children }) | |
| ParameterImagePreview({ imageSrc }) | |
| ParameterLabel({ id, asSpan, children, testId, ...props }) | |
| ParameterLabels({ disabled, ...props }) | A parameter input component for selecting multiple labels with swatch colors. Supports grouped labels with nested menus. |
| ParameterLabelsInner(props) | |
| ParameterMultiSelect({ disabled, ...props }) | |
| ParameterMultiSelectInner(props) | |
| ParameterNameAndPublicIdInput({ id, onBlur, autoFocus, onNameChange, onPublicIdChange, nameIdError, publicIdError, readOnly, hasInitialPublicIdField, label, warnOverLength, nameIdField, nameCaption, namePlaceholderText, publicIdFieldName, publicIdCaption, publicIdPlaceholderText, values, }) | |
| ParameterOverrideMarker(props) | |
| ParameterRichText({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, caption, errorTestId, captionTestId, menuItems, children, ...innerProps }) | |
| ParameterRichTextInner({ value, editorFooter, children, customNodes, editorWrapperClassName, ...richTextProps }) | |
| ParameterShell({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, menuWithoutPortal, ...props }) | Uniform Parameter shell component |
| ParameterShellPlaceholder({ children }) | |
| Popover({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, onInit, variant, maxWidth, gutter, portal, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, style, tabIndex, id, disabled, }) | |
| PopoverBody({ variant, maxWidth, children, ...otherProps }) | A styled popover body component with design system styles. Used to create custom popover-like behavior. |
| popTopLayerDialog(dialog) | Remove a dialog element from the stack. Safe to call even if the dialog is not currently in the stack (no-op in that case). |
| prefersReducedMotion(cssProp) | Prefers Reduced Motion Helper Function |
| ProgressBar({ current, max, theme, variant, ...props }) | |
| ProgressList({ inProgressId, items, autoEllipsis, ...htmlProps }) | Component that sets the base structure for scrollable content in a max height container |
| ProgressListItem({ children, status, error, errorLevel, autoEllipsis, }) | |
| pushTopLayerDialog(dialog) | Push a dialog element onto the stack. Intended to be called by <code>Modal</code> immediately after <code>showModal()</code> so the dialog can become the active toast portal target. |
| QuickFilter({ iconLeft, collapsedIcon, buttonText, testId, ariaLabel, children, size, disabled, selectedItems, onSearchTermChanged, addButtonText, onItemRemoved, totalResults, maxMenuHeight, maxCount, containerCss, resultsComponent, hasNoResultsMessage, searchPlaceholderText, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, onSearchEnterKeyDown, }) | |
| replaceUnderscoreInString(title) | |
| ResolveIcon({ icon, name, styleType, ...props }) | Uniform Resolve Icon Component |
| ResponsiveTableContainer({ children }) | |
| RichTextToolbarIcon({ icon }) | |
| ScrollableList({ label, children, ...props }) | Component that sets the base structure for scrollable content in a max height container |
| ScrollableListInputItem({ label, icon, active, disableShadow, children, labelTestId, ...props }) | |
| ScrollableListItem({ buttonText, icon, active, disableShadow, ...props }) | Component used within <ScrollableList /> for adding interactive button components with predefined styles |
| SearchableMenu(props) | Searchable menu allows searching through its menu items |
| SegmentedControl({ name, options, value, onChange, disabled, orientation, size, hideOptionText, iconSize, currentBackgroundColor, noCheckmark: _noCheckmark, ...props }) | A control with multiple segments. Can be used as a replacement of radio buttons. |
| Skeleton({ width, height, inline, circle, children, ...otherProps }) | A loading skeleton |
| SliderLabels({ ticks, currentValue, containerWidth }) | SliderLabels component that intelligently shows/hides labels based on available space |
| Spinner({ width, label, isPaused, }) | |
| StackedModalHeader({ children, onBack, icon }) | |
| StackedModalStep({ children, buttonGroup }) | <p>Defines a single step inside a <code>StackedModal</code>.</p><p>Renders a scrollable content area and an optional bottom button group. The <code>header</code> prop is read by the parent <code>StackedModal</code> and displayed in the modal header row with a matching slide animation.</p> |
| StatusBullet({ status, hideText, size, message, compact, ...props }) | |
| subscribeTopLayerDialog(listener) | Subscribe to changes to the topmost open dialog. The listener is invoked immediately with the current top (or <code>null</code> if no dialog is open) so subscribers don't need a separate initial read. |
| SuccessMessage({ message, testId, ...props }) | Component that provides success messaging to input fields |
| supports(cssProp) | Media Query Helper Function |
| Swatch({ size, variant, tooltip, testId, }) | |
| SwatchComboBox({ labelTitle, caption, isMulti, ...props }) | |
| SwatchComboBoxLabelStyles() | SwatchComboBoxLabelStyles provides custom styles for react-select's multiValue and multiValueLabel. Dynamically applies color based on each option's color property. |
| SwatchLabel({ variant, size, label, rightSlot, tooltip, leftSlot, }) | A colored label component that uses the same color variants as Swatch. |
| SwatchLabelRemoveButton({ onRemove, size, }) | |
| SwatchLabelTooltip({ parentTitle, title, description, }) | A tooltip component that displays a swatch label with a parent title and a description. |
| TabButton({ children, id, ...props }) | |
| TabButtonGroup({ children, ...props }) | |
| TabContent({ children, tabId, id, keepMounted, ...props }) | |
| Tabs({ children, onSelectedIdChange, useHashForState, selectedId, manual, orientation, className, style, }) | |
| TakeoverDrawerRenderer(props) | A specialized drawer renderer that takes over the full stack. DrawerProvider - Must be rendered inside a <code><DrawerProvider></code>. |
| Theme({ disableReset, disableGlobalReset }) | Uniform CSS Variables, font provider and optional reset stylesheet |
| Tile({ children, disabled, isSelected, orientation, ...props }) | |
| TileContainer({ bgColor, containerPadding, gap, gridTemplateColumns, children, withoutGrouping, ...props }) | Uniform Tile Container Component |
| TileText({ as, children, ...props }) | |
| ToastContainer({ limit, autoCloseDelay }) | Renders the global toast viewport. Intended to be mounted exactly once near the root of the app (typically in <code>_app.tsx</code>). |
| Tooltip({ children, title, placement, visible, withoutPortal, timeout, gutter, ...popupProps }) | Displays contextual information when hovering or focusing an element. |
| TwoColumnLayout({ bgColor, invertLayout, supportingContent, children, }) | |
| UniformBadge({ theme, ...props }) | Uniform Badge Logo |
| UniformLogo({ theme, ...props }) | Uniform Logo |
| UniformLogoLarge({ ...props }) | |
| useBreakpoint() | Returns the name of the current breakpoint. Built on top of https://github.com/streamich/react-use/blob/master/docs/createBreakpoint.md |
| useButtonStyles({ size, ...props }) | |
| useCloseCurrentDrawer() | |
| useCurrentDrawer() | |
| useCurrentTab() | Returns the current tabs context with <code>value</code> and <code>setValue</code>. Must be used inside <code><Tabs></code>. |
| useDateTimePickerContext() | Use this context for slots within the date time picker in order to manipulate the current value |
| useDrawer() | |
| useIconContext() | |
| useImageLoadFallback({ src, srcSet, errorFallbackSrc, logContext, }) | Manage <code>src</code>/<code>srcSet</code> for an image with optional fallback behavior. If the image fails to load and <code>errorFallbackSrc</code> is provided, we switch to it once and clear <code>srcSet</code>. |
| useModalPortalContainer() | |
| useOutsideClick(containerRef, handler) | |
| useParameterShell() | |
| usePopoverComponentContext() | Hook to get the current popover context. Useful for closing the popover with a nested button or interactive element. |
| useRichTextToolbarState({ config }) | |
| useShortcut({ disabled, handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, useKey, }) | |
| useStackedModal() | Hook to access the stacked modal navigation context. Provides the current step, total steps, navigation direction, and functions to navigate between steps. |
| VerticalRhythm({ align, justify, tag, gap, children, ref, ...props }) | |
| WarningMessage({ message, testId, ...props }) | Component that provides warning messaging to input fields |