| 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" |
| AnimationFile({ label, loop, autoplay, width, height, ...props }) | See https://lottiereact.com/ for example documentation |
| Avatar({ src, label, children, size, ...props }) | A component to render rounded avatars of a user or an app. |
| AvatarGroup({ max, children, getTruncatedLabel, ...props }) | Renders avatars in a group with the ability to truncate the list. This component works best when the <Avatar> component are direct children. |
| Badge({ text, theme, size, uppercaseText, ...props }) | Uniform Badge Component |
| Banner({ type, onDismiss, children, isAnimated, ...props }) | Uniform Banner Component |
| borderTopIcon(props) | |
| buttonRippleEffect(props) | |
| ButtonWithMenu({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, portal, maxMenuHeight, tooltip, shortcut, ...buttonProps }) | |
| Calendar({ value, timeZone, minValue, maxValue, onChange, autoFocus, isDisabled, isInvalid, isReadOnly, ...props }) | A Calendar Grid which allows the user to navigate and select a date. |
| Callout({ type, compact, title, children, className, testId, }) | Uniform Callout Component |
| canvasAlertIcon(props) | |
| 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 |
| cardIcon(props) | |
| CardTitle({ title, titleWithMarginBottom, children }) | |
| Chip({ icon, iconColor, text, size, theme, variant, chipAction, 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 |
| ConnectToDataElementButton({ icon, iconColor, children, isBound, isActive, isLocked, title, ...props }) | |
| 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, ...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, testId, ...props }) | Date Time Picker |
| DateTimePickerSummary({ value, placeholder, }) | |
| 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. |
| DropdownStyleMenuTrigger({ bgColor, children, ...buttonProps }) | Renders a dropdown menu style menu trigger button |
| 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, }) | |
| fullWidthScreenIcon(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, asSpan, 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, className, imgClassName, variant, width, height, ...imgAttribs }) | |
| ImageBroken({ width, height, ...props }) | |
| imageTextIcon(props) | |
| infoFilledIcon(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 |
| IntegrationHeaderSection({ title, description, icon, docsLink, badgeText, menu, children, ...props }) | Uniform Integration Header Section 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 }) | |
| jsonIcon(props) | |
| KeyValueInput({ value, onChange, label, newItemDefault, keyLabel, valueLabel, keyInfoPopover, valueInfoPopover, disabled, errors, onFocusChange, }) | A component to render a sortable key-value input |
| Label({ children, className, testId, ...props }) | |
| LabelLeadingIcon({ icon, iconColor, children, isBound, isActive, isLocked, title, ...props }) | |
| Legend({ children }) | |
| LimitsBar({ current, max, label }) | Uniform Limits Bar Component |
| LinkList({ title, padding, children, ...props }) | |
| LoadingCardSkeleton() | |
| LoadingIcon({ height, width, ...props }) | Loading Icon |
| LoadingIndicator({ size, ...props }) | Loading Indicator |
| LoadingOverlay({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, }) | Loading Overlay. NOTE: the container/parent element must have a non-static <code>position</code> value for the overlay to work properly. |
| MediaCard({ title, subtitle, infoPopover, cover, menuItems, sideSection, onClick, buttonType, ...cardProps }) | |
| 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 }) | Renders an icon for a menu item. Optional micro wrapper around an Icon component configured to match the menu item icon style. |
| MenuItemSeparator() | |
| mq(size) | 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. |
| numberInput(props) | |
| ObjectGridContainer({ gridCount, children }) | |
| ObjectGridItem({ header, cover, rightSlot, menuItems, isSelected, children, }) | |
| ObjectGridItemCardCover(props) | |
| ObjectGridItemCover({ coverSlotLeft, coverSlotRight, ...props }) | |
| ObjectGridItemCoverButton({ id, isSelected, onSelection, coverSlotLeft, coverSlotRight, selectedText, ...props }) | |
| ObjectGridItemHeading({ heading, beforeHeadingSlot, afterHeadingSlot, }) | |
| ObjectGridItemIconWithTooltip({ tooltipTitle, placement, icon, iconColor, }) | |
| ObjectItemLoadingSkeleton({ showCover }) | |
| ObjectListItem(props) | |
| ObjectListItemContainer({ children, ...props }) | |
| ObjectListItemCover({ imageUrl, ...props }) | |
| ObjectListItemHeading({ heading, beforeHeadingSlot, afterHeadingSlot, ...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 |
| ParameterDataResource({ label, labelLeadingIcon, id, onConnectDatasource, caption, disabled, children, }) | |
| ParameterDrawerHeader({ title, iconBeforeTitle, children }) | |
| ParameterImagePreview({ imageSrc }) | |
| ParameterLabel({ id, asSpan, children, ...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, value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorFooter, customNodes, children, variables, customControls, }) | |
| ParameterRichTextInner({ value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorFooter, children, customNodes, variables, customControls, }) | |
| ParameterShell({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }) | Uniform Parameter shell component |
| ParameterShellPlaceholder({ children }) | |
| Popover({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, onInit, maxWidth, ...otherProps }) | |
| 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, }) | |
| queryStringIcon(props) | |
| rectangleRoundedIcon(props) | |
| replaceUnderscoreInString(title) | |
| ResolveIcon({ icon, name, styleType, ...props }) | Uniform Resolve Icon Component |
| 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, noCheckmark, disabled, orientation, size, hideOptionText, iconSize, currentBackgroundColor, ...props }) | A control with multiple segments. Can be used as a replacement of radio buttons. |
| SelectableMenuItem({ selected, children, ...menuItemProps }) | |
| settings(props) | |
| ShortcutContext({ children }) | |
| ShortcutRevealer({ shortcut, macShortcut, className, }) | |
| Skeleton({ width, height, inline, circle, children, ...otherProps }) | A loading skeleton |
| StatusBullet({ status, hideText, size, message, ...props }) | |
| structurePanelIcon(props) | |
| SuccessMessage({ message, testId, ...props }) | Component that provides success messaging to input fields |
| supports(cssProp) | Media Query Helper Function |
| TabButton({ children, id, ...props }) | |
| TabButtonGroup({ children, ...props }) | |
| TabContent({ children, ...props }) | |
| Tabs({ children, onSelectedIdChange, useHashForState, selectedId, manual, ...props }) | |
| TakeoverDrawerRenderer(props) | |
| textInput(props) | |
| Theme({ disableReset, disableGlobalReset }) | Uniform CSS Variables, font provider and optional reset stylesheet |
| Tile({ children, disabled, isSelected, ...props }) | |
| TileContainer({ bgColor, containerPadding, gap, gridTemplateColumns, children, ...props }) | Uniform Tile Container Component |
| TileText({ as, children, ...props }) | |
| ToastContainer({ limit, autoCloseDelay }) | A component to render toasts in your app. This component is supposed to be used just once in your app. Typically inside _app.tsx |
| Tooltip({ children, title, placement, visible, withoutPortal, ...props }) | |
| 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 |
| useCloseCurrentDrawer() | |
| useCurrentDrawer() | |
| useCurrentTab() | |
| useDateTimePickerContext() | Use this context for slots within the date time picker in order to manipulate the current value |
| useDrawer() | |
| useIconContext() | |
| useOutsideClick(containerRef, handler) | |
| useParameterShell() | |
| usePopoverComponentContext() | Hook to get the current popover context This hook is used to get the current popover context useful for closing the popover with a nested button or interative element |
| useShortcut({ disabled, handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, }) | |
| VerticalRhythm({ align, justify, tag, gap, children, ref, ...props }) | |
| warningIcon(props) | |
| WarningMessage({ message, testId, ...props }) | Component that provides warning messaging to input fields |
| yesNoIcon(props) | |