LinkNode

DateTimePickerVariant

AddButton({ buttonText, onClick, shortcut, macShortcut, ...props }, input)

Add button component

AddListButton({ buttonText, onButtonClick, disabled, icon, variant, theme, ...buttonProps }, input)

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, }, input)

Avatar({ src, label, children, size, as, labelWithoutPortal, ...props }, input)

A component to render rounded avatars of a user or an app.

AvatarGroup({ max, children, getTruncatedLabel, truncatedProps, ...props }, input)

Renders avatars in a group with the ability to truncate the list. This component works best when the component are direct children.

Banner({ type, onDismiss, children, isAnimated, ...props }, input)

Uniform Banner Component

buttonRippleEffect(props)

ButtonWithMenu({ onButtonClick, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, portal, maxMenuHeight, tooltip, shortcut, buttonType, ...buttonProps }, input)

Calendar({ value, timeZone, minValue, maxValue, onChange, styles: stylesProp, autoFocus, isDisabled, isInvalid, isReadOnly, withTodayButton, isDateUnavailable, ...props }, input)

A Calendar Grid which allows the user to navigate and select a date.

Callout({ type, compact, title, children, className, testId, }, input)

Uniform Callout Component

Caption({ children, testId, dynamicSize, ...props }, input)

Component that provides caption text to input fields

Card({ title, menuItems, children, titleWithMarginBottom, disabled, tag: Tag, menuButtonTestId, ...props }, input)

CardContainer({ bgColor, padding, withLastColumn, children, ...props }, input)

Uniform Card Container

CardTitle({ title, titleWithMarginBottom, children }, input)

Chip({ icon, iconColor, text, size, theme, variant, chipAction, isDisabled, as, ...props }, input)

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 }, input)

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 }, input)

cq(size)

Container Query Helper Function

CreateTeamIntegrationTile({ title, buttonText, onClick, asDeepLink, ...props }, input)

DashedBox({ bgColor, textAlign, boxHeight, children, ...props }, input)

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 }, input)

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.

Subcomponents can manipulate the value directly by using the useDateTimePickerContext() hook.

DateTimePickerSummary({ value, placeholder, }, input)

debounce(fn, ms)

Details({ summary, children, isOpenByDefault, isOpen, isIndented, isCompact, onChange, ...props }, input)

DismissibleChipAction({ onDismiss, ...props }, input)

Dismissible chip action should be used with the Chip component

DrawerContent({ children, buttonGroup, noPadding, ...props }, input)

DrawerProvider({ children }, input)

Provides the context to the Drawer and DrawerRenderer components.

DrawerRenderer({ stackId, position, width, minWidth, maxWidth, leftAligned, withoutFluidWidth, ...otherProps }, input)

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 <DrawerProvider>.

EditTeamIntegrationTile({ id, icon, name, onEdit, isPublic, canEdit, }, input)

Uniform Edit Team Integration Tile

ErrorMessage({ message, testId, truncated, ...otherProps }, input)

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, }, input)

FlexiCard({ heading, children, width, height, maxHeight, ...props }, input)

FlexiCardTitle({ icon, heading, ...props }, input)

Flexi Card Title Component recommended to be used within the FlexiCard component

getButtonSize(size)

getButtonStyles({ size, ...props }, input)

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, }, input)

getFormattedShortcut(shortcut)

Gets a formatted version of a shortcut for display.

i.e. converts "mod+alt+n" to "['⌘', '⌥', 'N']" on macs, or ['^', 'Alt', 'N'] on windows.

getParentPath(path, noRootSlash)

getPathSegment(path)

Heading({ level, as, withMarginBottom, children, ...hAttributes }, input)

Component that sets the heading tag

HorizontalRhythm({ align, justify, tag, gap, children, ref, ...props }, input)

IconsProvider({ children }, input)

Provider to the Icon component

Image_2({ alt, src, srcSet, className, imgClassName, variant, width, height, errorFallbackSrc, ...imgAttribs }, input)

ImageBroken({ width, height, ...props }, input)

InfoMessage({ message, testId, icon, ...props }, input)

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)

Input Inline Select

IntegrationComingSoon({ name, icon, id, onUpVoteClick, timing, ...props }, input)

Uniform Integration Coming Soon Component

IntegrationLoadingTile({ count }, input)

Uniform Integration Loading Tile

IntegrationModalHeader({ icon, name, menu, children }, input)

Uniform Integration Modal Header

IntegrationModalIcon({ icon, name, ...imgProps }, input)

Uniform Integration Modal Icon

IntegrationTile({ id, icon, name, requiedEntitlement, onAddIntegration, isPublic, isInstalled, authorIcon, ...btnProps }, input)

isNativeButtonTrigger(element)

Determines if the given trigger element will render a real <button> element to the DOM, so that Base UI's nativeButton prop can be set correctly.

Detection strategy (any one of): 1. Plain <button> JSX (element.type === 'button') or a <button css={...} /> is still detected. We also fall back to checking element.props.type === 'button' for the original type="button" attribute Emotion preserves.

Anything else (including non-element children, plain <div>, etc.) falls back to false so Base UI's keyboard polyfill keeps firing.

isSecureURL(value)

isValidUrl(urlString, options)

JsonEditor({ defaultValue, onChange, jsonSchema, height, readOnly }, input)

KeyValueInput({ value, onChange, label, newItemDefault, keyLabel, valueLabel, iconLabel, keyInfoPopover, valueInfoPopover, iconInfoPopover, disabled, errors, onFocusChange, showIconColumn, renderIconSelector, independentKeyValue, }, input)

A component to render a sortable key-value input

Label({ children, className, testId, ...props }, input)

LabelLeadingIcon({ icon, iconColor, children, isActive, isLocked, title, ...props }, input)

LabelsQuickFilter({ buttonText, addButtonText, items, selectedIds, onSelect, onDeselect, disabled, testId, totalResults, onCreateLabel, withoutPortal, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, maxCount, }, input)

A reusable quick filter component for selecting labels with swatch colors. Supports flat labels and grouped labels with nested menus.

Legend({ children }, input)

LimitsBar({ current, max, popoverContent, barColor, ...props }, input)

Uniform Limits Bar Component

LinkList({ title, children, ...props }, input)

LoadingCardSkeleton()

LoadingIcon({ height, width, ...props }, input)

Loading Icon

LoadingIndicator({ size, color, ...props }, input)

Loading Indicator

LoadingOverlay({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, position, }, input)

Loading Overlay. NOTE: the container/parent element must have a non-static position value for the overlay to work properly.

markNativeButton(component)

Static marker used by isNativeButtonTrigger() to detect design-system components whose root DOM node is a real <button>; setting this marker on the wrapper component allows those triggers to opt back into the native-button code path safely.

Set this marker via markNativeButton() on any forwardRef/component whose root DOM node is <button>. Consumers writing custom triggers can do the same.

MenuGroup({ title, children }, input)

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 icon prop to a MenuItem.

MenuItemIcon({ icon, size }, input)

Renders an icon for a menu item. Optional micro wrapper around an Icon component configured to match the menu item icon style.

MenuItemSeparator({ ...props }, input)

mq(size, bound)

Media Query Helper Function

MultilineChip({ children, onClick, ...props }, input)

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, revealMenuOnHover, ...props }, input)

A card-style grid item for displaying an object with cover media, heading, subtitle, and optional context menu.

When an onClick handler is provided, the entire card becomes clickable with hover styles. Menu and right-slot interactions use stopPropagation to prevent triggering the card click. Wrap items with ObjectGridContainer for responsive grid layout.

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 }, input)

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 }, input)

Clickable variant of ObjectGridItemCover() that acts as a selection toggle. When selected, a chip with selectedText appears in the bottom-right corner. Click events are stopped from propagating to parent elements.

ObjectGridItemHeading({ heading, beforeHeadingSlot, afterHeadingSlot, tooltip, ...props }, input)

Heading component designed for use inside ObjectGridItem()'s header slot.

Automatically detects when the heading text is truncated (via a ResizeObserver) and shows the tooltip on hover so users can still read the full title. Click events on beforeHeadingSlot and afterHeadingSlot are stopped from propagating to the parent grid item.

ObjectGridItemIconWithTooltip({ tooltipTitle, placement, icon, iconColor, ...props }, input)

Small icon with a tooltip, designed for the rightSlot 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, }, input)

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 }, input)

A horizontal list item for displaying an object with header, cover, right slot, and optional context menu.

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.

ObjectListItemContainer({ children, gap, ...props }, input)

Vertical container that wraps ObjectListItem() elements with role="list" semantics and renders a top-border divider between each item.

ObjectListItemCover({ imageUrl, noImageText, icon, ...props }, input)

Thumbnail cover image for use inside ObjectListItem()'s cover slot. Renders a fixed-size (80×45) container with a lazy-loaded image, or a text placeholder when no imageUrl is available.

ObjectListItemHeading({ heading, beforeHeadingSlot, afterHeadingSlot, headingTestId, ...props }, input)

Heading component designed for use inside ObjectListItem()'s header slot.

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).

ObjectListSubText({ children, ...props }, input)

PageHeaderSection({ title, desc, children, linkText, level, linkProps, linkManagerComponent, afterTitle, afterTitleGap, afterTitleAlign, ...htmlProps }, input)

Pagination({ limit, offset, total, onPageChange, }, input)

Paragraph({ className, htmlContent, children, ...pAttributes }, input)

Component for generic paragraph tags

ParameterActionButton({ children, themeType, tooltip, tooltipProps, renderAs, disabled, ...props }, input)

ParameterDrawerHeader({ title, iconBeforeTitle, children }, input)

ParameterImagePreview({ imageSrc }, input)

ParameterLabel({ id, asSpan, children, testId, ...props }, input)

ParameterLabels({ disabled, ...props }, input)

A parameter input component for selecting multiple labels with swatch colors. Supports grouped labels with nested menus.

ParameterLabelsInner(props)

ParameterMultiSelect({ disabled, ...props }, input)

ParameterMultiSelectInner(props)

ParameterNameAndPublicIdInput({ id, onBlur, autoFocus, onNameChange, onPublicIdChange, nameIdError, publicIdError, readOnly, hasInitialPublicIdField, label, warnOverLength, nameIdField, nameCaption, namePlaceholderText, publicIdFieldName, publicIdCaption, publicIdPlaceholderText, values, }, input)

ParameterOverrideMarker(props)

ParameterRichText({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, caption, errorTestId, captionTestId, menuItems, children, ...innerProps }, input)

ParameterRichTextInner({ value, editorFooter, children, customNodes, editorWrapperClassName, ...richTextProps }, input)

ParameterShell({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, menuWithoutPortal, ...props }, input)

Uniform Parameter shell component

ParameterShellPlaceholder({ children }, input)

Popover({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, onInit, variant, maxWidth, gutter, portal, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, style, tabIndex, id, disabled, }, input)

PopoverBody({ variant, maxWidth, children, ...otherProps }, input)

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 }, input)

ProgressList({ inProgressId, items, autoEllipsis, ...htmlProps }, input)

Component that sets the base structure for scrollable content in a max height container

ProgressListItem({ children, status, error, errorLevel, autoEllipsis, }, input)

pushTopLayerDialog(dialog)

Push a dialog element onto the stack. Intended to be called by Modal immediately after showModal() 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, }, input)

replaceUnderscoreInString(title)

ResolveIcon({ icon, name, styleType, ...props }, input)

Uniform Resolve Icon Component

ResponsiveTableContainer({ children }, input)

RichTextToolbarIcon({ icon }, input)

ScrollableList({ label, children, ...props }, input)

Component that sets the base structure for scrollable content in a max height container

ScrollableListInputItem({ label, icon, active, disableShadow, children, labelTestId, ...props }, input)

ScrollableListItem({ buttonText, icon, active, disableShadow, ...props }, input)

Component used within 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 }, input)

A control with multiple segments. Can be used as a replacement of radio buttons.

Skeleton({ width, height, inline, circle, children, ...otherProps }, input)

A loading skeleton

SliderLabels({ ticks, currentValue, containerWidth }, input)

SliderLabels component that intelligently shows/hides labels based on available space

Spinner({ width, label, isPaused, }, input)

StackedModalHeader({ children, onBack, icon }, input)

StackedModalStep({ children, buttonGroup }, input)

Defines a single step inside a StackedModal.

Renders a scrollable content area and an optional bottom button group. The header prop is read by the parent StackedModal and displayed in the modal header row with a matching slide animation.

StatusBullet({ status, hideText, size, message, compact, ...props }, input)

subscribeTopLayerDialog(listener)

Subscribe to changes to the topmost open dialog. The listener is invoked immediately with the current top (or null if no dialog is open) so subscribers don't need a separate initial read.

SuccessMessage({ message, testId, ...props }, input)

Component that provides success messaging to input fields

supports(cssProp)

Media Query Helper Function

Swatch({ size, variant, tooltip, testId, }, input)

SwatchComboBox({ labelTitle, caption, isMulti, ...props }, input)

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, }, input)

A colored label component that uses the same color variants as Swatch.

SwatchLabelRemoveButton({ onRemove, size, }, input)

SwatchLabelTooltip({ parentTitle, title, description, }, input)

A tooltip component that displays a swatch label with a parent title and a description.

TabButton({ children, id, ...props }, input)

TabButtonGroup({ children, ...props }, input)

TabContent({ children, tabId, id, keepMounted, ...props }, input)

Tabs({ children, onSelectedIdChange, useHashForState, selectedId, manual, orientation, className, style, }, input)

TakeoverDrawerRenderer(props)

A specialized drawer renderer that takes over the full stack. DrawerProvider - Must be rendered inside a <DrawerProvider>.

Theme({ disableReset, disableGlobalReset }, input)

Uniform CSS Variables, font provider and optional reset stylesheet

Tile({ children, disabled, isSelected, orientation, ...props }, input)

TileContainer({ bgColor, containerPadding, gap, gridTemplateColumns, children, withoutGrouping, ...props }, input)

Uniform Tile Container Component

TileText({ as, children, ...props }, input)

ToastContainer({ limit, autoCloseDelay }, input)

Renders the global toast viewport. Intended to be mounted exactly once near the root of the app (typically in _app.tsx).

Tooltip({ children, title, placement, visible, withoutPortal, timeout, gutter, ...popupProps }, input)

Displays contextual information when hovering or focusing an element.

TwoColumnLayout({ bgColor, invertLayout, supportingContent, children, }, input)

UniformBadge({ theme, ...props }, input)

Uniform Badge Logo

UniformLogo({ theme, ...props }, input)

Uniform Logo

UniformLogoLarge({ ...props }, input)

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 }, input)

useCloseCurrentDrawer()

useCurrentDrawer()

useCurrentTab()

Returns the current tabs context with value and setValue.

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, }, input)

Manage src.

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 }, input)

useShortcut({ disabled, handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, useKey, }, input)

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 }, input)

WarningMessage({ message, testId, ...props }, input)

Component that provides warning messaging to input fields

ActionButtonsProps

AvatarGroupProps

CalloutProps

ComboBoxSelectableGroup

DateTimePickerValue

DrawerItem

DrawerRendererItemProps

DrawerRendererProps

DropdownStyleMenuTriggerProps

IconButtonProps

IconProps

ImageProps

InputKeywordSearchProps

LoadingIconProps

LoadingOverlayProps

MenuProps

PopoverStore

ProgressBarProps

SelectableMenuItemProps

UseShortcutResult

accessibleHidden

actionBarVisibilityStyles

AVATAR_SIZE_2XL

AVATAR_SIZE_2XS

Canonical width tokens for each Avatar size (single source of truth for rem values).

AVATAR_SIZE_3XL

Largest step (6rem ≈ 96px when root font size is 16px).

AVATAR_SIZE_LG

AVATAR_SIZE_MD

AVATAR_SIZE_SM

AVATAR_SIZE_XL

AVATAR_SIZE_XS

avatarImageStyles

avatarSize2xlStyles

avatarSize2xsStyles

avatarSize3xlStyles

avatarSizeLgStyles

avatarSizeMdStyles

avatarSizeSmStyles

avatarSizeXlStyles

avatarSizeXsStyles

avatarStyles

BetaDecorator

borderTopIcon

breakpoints

Object of breakpoints and the pixel values

button

Button

Uniform Button Component

buttonAccentAltDark

buttonAccentAltDarkOutline

buttonDestructive

buttonDisabled

buttonGhost

buttonGhostDestructive

buttonGhostUnimportant

buttonPrimary

buttonPrimaryInvert

buttonSecondary

buttonSecondaryInvert

buttonSoftAccentPrimary

buttonSoftAlt

buttonSoftDestructive

buttonSoftPrimary

buttonSoftTertiary

buttonTertiary

buttonTertiaryOutline

buttonUnimportant

canvasAlertIcon

cardIcon

chatIcon

CheckboxWithInfo

CurrentDrawerContext

customIcons

DebouncedInputKeywordSearch

Wrapper for InputKeywordSearch that debounces the onSearchTextChanged callback to avoid triggering any business logic on every keystroke.

DescriptionList

A component to render a key-value list (uses

,

and

under the hood).

DragHandle

Drawer

A drawer component that opens from the right side of its parent. When used without an external <DrawerProvider>.

DropdownStyleMenuTrigger

Renders a dropdown menu style menu trigger button. Marked with markNativeButton so the design system's Menu knows to opt into Base UI's native-button code path even though the React element type is a function component.

fadeIn

fadeIn animation - fade in an element from 0 to 1 opacity

fadeInBottom

fadeInBottom animation - fades in an element from the Y axis by 10px

fadeInLtr

fadeInRtl

fadeInTop

fadeInTop animation - fades in an element from the Y axis by -10px

fadeOutBottom

fadeOutBottom animation - fades out an element from the Y axis by 10px

Fieldset

FilterChip

Compact button used to toggle a filter on/off, optionally rendered as a dropdown trigger. Spreads ...props first then sets type last with a fallback to "button" so wrappers like Base UI's Menu.Trigger (which can forward type: undefined via cloneElement. Marked with markNativeButton so Menu knows the rendered DOM is a real <button> and can pass nativeButton={true} to Base UI.

fullWidthScreenIcon

growSubtle

growSubtle animation - increases the size of an element from scale(1) - scale(1.15) and back down to scale(1) using transform: scale(1)

Icon

Component that renders icons IconsProvider - Wrap a parent component with <IconsProvider> for string-based icon names.

IconButton

imageTextIcon

infoFilledIcon

Input

Input Component

inputError

InputKeywordSearch

Component used for keyword search functionality

inputSelect

InputSelect

Input Select Component

InputTime

Time input with segmented control

InputToggle

Component that creates a checkbox or radio input field

jsonIcon

labelText

Link

Uniform Link Component

LinkButton

LinkTile

LinkWithRef

Uniform LinkWithRef Component We recommend using this link next/link

Menu

Component used for creating clickable menus

MenuButton

Bare <button type="button"> styled wrapper used as a Menu trigger.

The type attribute is set after ...props with a fallback so wrappers such as Base UI's Menu.Trigger (which can forward type: undefined via cloneElement. Marked with markNativeButton so the design system's Menu component knows to opt into Base UI's native-button code path.

MenuItem

MenuItem Component used along side

MenuItemInner

MenuItem Component for headless use outside

MenuSelect

Select-style Menu trigger that renders the current value with a chevron. Marked as a native-button trigger for the same reason as MenuThreeDots.

MenuThreeDots

Three-dot ("more options") Menu trigger. Marked as a native-button trigger so Menu reports nativeButton={true} to Base UI even though it is a function component (Base UI inspects the React element's outer type).

Modal

A modal component to open a dialog with a backdrop that covers the whole page.

ModalDialog

ModalPortalContext

Context for passing a portal container element to child popover/menu components rendered inside a Modal or the docked/fullscreen Scout side chat panel. Ensures floating elements render into that element instead of document.body, preventing clipping by overflow and incorrect stacking (e.g. menus behind --z-side-chat).

numberInput

ObjectGridContainer

CSS Grid container for laying out ObjectGridItem() elements in a responsive grid. Supports forwarding a ref to the underlying <div>.

ParameterGroup

ParameterImage

ParameterImageInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterInput

ParameterInputInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterLink

ParameterLinkInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterMenuButton

ParameterNumberSlider

Parameter wrapper for numeric sliders

ParameterNumberSliderInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterSelect

ParameterSelectInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterSelectSlider

Parameter wrapper for option-based sliders

ParameterSelectSliderInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterShellContext

ParameterTextarea

ParameterTextareaInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

ParameterToggle

ParameterToggleInner

ParameterShell - Must be rendered inside a <ParameterShell> component.

queryStringIcon

rectangleRoundedIcon

richTextToolbarButton

richTextToolbarButtonActive

ripple

scrollbarStyles

Custom scrollbar styles

SelectableMenuItem

A MenuItem that displays a selected state via a leading check icon.

The component forwards refs to the underlying menu item DOM node so that Base UI's SubmenuTrigger (which clones its render element and attaches a ref for positioning/focus management) works correctly when a SelectableMenuItem is used as a submenu trigger.

settings

settingsIcon

skeletonLoading

slideInRtl

slideInTtb

Slider

Slider component that supports both numeric values and predefined options

spin

StackedModal

A modal component that supports multi-step content with sliding transitions. Each child should be a StackedModalStep component that defines its own header, content, and button group.

Use the useStackedModal hook inside step content to navigate between steps.

structurePanelIcon

swatchColors

Swatch color CSS custom properties Exports CSS variables for all swatch variants that can be used in other components. Each variant has --swatch--border variables.

swatchVariant

Swatch variant styles as plain objects. Works with both Emotion's css prop and react-select's styles API.

Switch

Uniform Switch Input Component

Table

Uniform's Table component

TableBody

TableCellData

TableCellHead

TableFoot

TableHead

TableRow

TAKEOVER_STACK_ID

Textarea

Textarea Component

textInput

toast

Imperative API for showing toasts from anywhere in the app. Mirrors the historical react-toastify surface (toast.

uniformAiIcon

uniformComponentIcon

uniformComponentPatternIcon

uniformCompositionPatternIcon

uniformConditionalValuesIcon

uniformContentTypeIcon

uniformEntryIcon

uniformEntryPatternIcon

uniformLocaleDisabledIcon

uniformLocaleIcon

uniformStatusDraftIcon

uniformStatusModifiedIcon

uniformStatusPublishedIcon

uniformUsageStatusIcon

utilityColors

Uniform utility colors exports the following css variables: --utility-caution-icon: #facc15; --utility-caution-title: #854d0e; --utility-caution-container: #fefce8; --utility-danger-icon: #f87171; --utility-danger-title: #991b1b; --utility-danger-container: #fef2f2; --utility-info-icon: #60a5fa; --utility-info-title: #1e40af; --utility-info-container: #eff6ff; --utility-note-icon: var(--gray-400); --utility-note-title: var(--gray-800); --utility-note-container: var(--gray-50); --utility-success-icon: #4ade80; --utility-success-title: #166534; --utility-success-container: #f0fdfa;

warningIcon

yesNoIcon

zigZag

zigZagThick

AddButtonProps

AddListButtonProps

AddListButtonThemeProps

AsideAndSectionLayout

AvatarProps

BannerProps

BannerType

BoxHeightProps

BreakpointSize

Breakpoint label values

BreakpointsMap

ButtonProps

ButtonSizeProps

Button sizes that are available to use with our brand

ButtonSoftThemeProps

ButtonThemeProps

Button themes that are available to use with our brand

ButtonWithMenuProps

ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes

CalendarCellCss

CalendarProps

CalendarStyles

Optional style overrides for calendar sub-elements.

CalloutType

Callout button types available to use with our brand

CaptionProps

CardContainerBgColorProps

CardContainerProps

CardProps

CardTitleProps

CheckboxWithInforProps

ChildFunction

ChipProps

ChipTheme

ComboBoxGroupBase

ComboBoxSelectableItem

ComboBoxSelectableOption

ContainerProps

ConvertComboBoxGroupsToSelectableGroupsOptions

CounterBgColors

CounterIconColors

CounterProps

CreateTeamIntegrationTileProps

DashedBoxProps

DateTimePickerProps

DebouncedInputKeywordSearchProps

DescriptionListProps

DetailsProps

DraggableHandleProps

DrawerContentProps

DrawerContextValue

DrawerProps

DrawersRegistryRecord

EditTeamIntegrationTileProps

ErrorMessageProps

FieldMessageProps

FieldsetProps

GroupedOption

HeadingProps

IconColor

sets fill color of the svg icon 'default'

IconName

A list of available icon names that can be used with the Uniform brand

IconType

sets the type of icon to use from the available list

InfoMessageProps

InputComboBoxOption

Default type of option for the combo box. Note: you can use any type of object you want. If it has a label and value property, it will auto wire those. If you want to use different properties, you can use the getOptionLabel and getOptionValue props.

InputComboBoxProps

InputCreatableComboBoxProps

InputInlineSelectOption

InputInlineSelectProps

InputProps

InputSelectProps

InputTimeProps

InputToggleProps

IntegrationComingSoonProps

IntegrationLoadingTileProps

IntegrationModalHeaderProps

IntegrationModalIconProps

IntegrationTileProps

IsoDateString

A string in the ISO 8601 date format: YYYY-MM-DD

IsoDateTimeString

A string in the ISO 8601 datetime format

IsoTimeString

A string in the ISO 8601 time format: hh:mm

JsonEditorProps

JsonSchemaObject

A JSON Schema document (draft-07).

KeyValueInputProps

KeyValueItem

LabelLeadingIconProps

LabelOption

Extended option type that supports label-specific properties

LabelProps

LabelsQuickFilterItem

Represents a label item that can be displayed in the quick filter

LabelsQuickFilterProps

LegendProps

LevelProps

Available heading weights e.g. 1 - 6

LimitsBarProps

LinkButtonProps

LinkColorProps

LinkListProps

LinkManagerWithRefType

LinkProps

LinkTileWithRefProps

MenuButtonProp

MenuGroupProps

MenuItemProps

MenuItemTextThemeProps

base - default red - red text accent-alt - AI color (accent-alt-dark). DOES NOT change the text - only the icon color!

MenuThreeDotsProps

ModalDialogProps

ModalProps

MultilineChipProps

ObjectGridContainerProps

Props for ObjectGridContainer.

ObjectGridItemCardCoverProps

Props for ObjectGridItemCardCover(). Pass **either** an icon or an imageUrl — the component renders the appropriate variant.

ObjectGridItemCoverButtonProps

Props for ObjectGridItemCoverButton(). The coverSlotBottomRight is reserved for the selection chip and cannot be overridden.

ObjectGridItemCoverProps

Props for ObjectGridItemCover(). Extends ObjectGridItemCardCoverProps with overlay slots at each corner.

ObjectGridItemIconWithTooltipProps

Props for ObjectGridItemIconWithTooltip().

ObjectGridItemProps

Props for ObjectGridItem().

ObjectGridItemTitleProps

Props for ObjectGridItemHeading().

ObjectItemLoadingSkeletonProps

Props for ObjectItemLoadingSkeleton().

ObjectListItemCoverProps

Props for ObjectListItemCover().

ObjectListItemHeadingProps

Props for ObjectListItemHeading().

ObjectListItemProps

Props for ObjectListItem().

Supports two layout modes via renderAs: - "single" (default) — header and right slot vertically centered on one line. - "multi" — header aligned to top with additional children rendered below it.

PageHeaderSectionProps

ParagraphProps

ParameterActionButtonProps

ParameterDrawerHeaderProps

ParameterGroupProps

ParameterImageProps

ParameterInputProps

ParameterLabelProps

ParameterLinkProps

ParameterMenuButtonProps

ParameterMultiSelectOption

ParameterMultiSelectProps

ParameterNameAndPublicIdInputProps

ParameterNumberSliderProps

ParameterRichTextInnerProps

ParameterRichTextProps

ParameterSelectProps

ParameterSelectSliderProps

ParameterShellProps

ParameterTextareaProps

ParameterToggleProps

PopoverBodyProps

PopoverProps

ProgressListItem

ProgressListItemProps

ProgressListProps

QuickFilterSelectedItem

RegisterDrawerProps

ResolveIconProps

RhythmProps

RichTextParamValue

ScrollableItemProps

ScrollableListContainerProps

ScrollableListItemProps

ScrollableListProps

SearchableMenuProps

SegmentedControlOption

SegmentedControlProps

SerializedLinkNode

ShortcutReference

SkeletonProps

SliderLabelsProps

SliderOption

SliderProps

StackedModalProps

StackedModalStepProps

Props for a single step within a StackedModal.

StatusBulletProps

StatusTypeProps

StepTransitionState

The semantic transition state for a single step, derived from the navigation context.

SuccessMessageProps

SwatchLabelProps

SwatchProps

SwatchSize

SwatchVariant

SwitchProps

TabButtonGroupProps

TabButtonProps

TabContentProps

TableBodyProps

TableCellDataProps

TableCellHeadProps

TableFootProps

TableHeadProps

TableProps

TableRowProps

TabsProps

TextAlignProps

TextareaProps

ThemeProps

@todo: line 144 onwards will be brought into a title, paragraph, list and link components

TickMark

TileContainerProps

TileProps

TileTitleProps

ToastContainerProps

ToastData

The shape consumers can store on a toast via the data field. Recognised by the default <ToastList> renderer to render either a progress bar or an inline Undo affordance, while keeping the imperative toast.* API unchanged for the rest of the codebase.

ToastId

Identifier returned by toast.* calls. Kept as string | number for backwards compatibility with the previous react-toastify Id type that several consumers store in useRef<number | string>.

ToastOptions

Per-call options accepted by every toast.* method. The shape mirrors the legacy react-toastify options the design system used to forward.

ToastPromiseOptions

Promise-toast options accepted by toast.promise. Each handler may be a static description string or a function that receives the resolved value / rejection error and returns a description. All three keys are optional to mirror react-toastify's behaviour where any unset state simply rendered an empty toast (or none at all when the promise settled fast enough).

ToastUpdate

Patch shape accepted by toast.update. A subset of Base UI's ToastManagerUpdateOptions<ToastData> that consumers actually use.

TooltipProps

TwoColumnLayoutProps

UniformLogoProps

UseShortcutOptions

WarningMessageProps