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, as, ...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, icon, iconColor, ...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, placement, offset, ...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 }) | |
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, 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. |
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. |
MenuItemHeading({ children }) | |
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, }) | |
ObjectGridItemLoadingSkeleton() | |
ObjectItemLoadingSkeleton({ showCover, renderAs, }) | |
ObjectListItem(props) | |
ObjectListItemContainer({ children, gap, ...props }) | |
ObjectListItemCover({ imageUrl, noImageText, ...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, testId, ...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, editorInputWrapperClassName, editorFooter, customNodes, children, variables, customControls, onInsertTable, onInsertAsset, minimalInteractivity, }) | |
ParameterRichTextInner({ value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, children, customNodes, variables, customControls, onInsertTable, onInsertAsset, minimalInteractivity, }) | |
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, }) | |
uniformAiIcon(props) | |
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 |
useRichTextToolbarState({ config }) | |
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) | |
zigZag(props) | |
zigZagThick(props) | |