Home > @uniformdev/design-system

design-system package

Classes

ClassDescription
LinkNode

Enumerations

EnumerationDescription
DateTimePickerVariant

Functions

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

Interfaces

InterfaceDescription
ActionButtonsProps
CalloutProps
ComboBoxSelectableGroup
DateTimePickerValue
DrawerItem
DrawerRendererItemProps
DrawerRendererProps
DropdownStyleMenuTriggerProps
IconButtonProps
IconProps
ImageProps
InputKeywordSearchProps
LoadingIconProps
LoadingOverlayProps
MenuProps
ProgressBarProps
SelectableMenuItemProps
UseShortcutResult

Variables

VariableDescription
accessibleHidden
BetaDecorator
breakpointsObject of breakpoints and the pixel values
button
ButtonUniform Button Component
buttonAccentAltDark
buttonAccentAltDarkOutline
buttonDestructive
buttonGhost
buttonGhostDestructive
buttonGhostUnimportant
buttonPrimary
buttonPrimaryInvert
buttonSecondary
buttonSecondaryInvert
buttonTertiary
buttonTertiaryOutline
buttonUnimportant
CheckboxWithInfo
CurrentDrawerContext
customIcons
DebouncedInputKeywordSearchWrapper for InputKeywordSearch that debounces the onSearchTextChanged callback to avoid triggering any business logic on every keystroke.
DescriptionListA component to render a key-value list (uses <dl />, <dt /> and <dd /> under the hood).
DragHandle
DrawerA drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
fadeInfadeIn animation - fade in an element from 0 to 1 opacity
fadeInBottomfadeInBottom animation - fades in an element from the Y axis by 10px
fadeInLtr
fadeInRtl
fadeInTopfadeInTop animation - fades in an element from the Y axis by -10px
fadeOutBottomfadeOutBottom animation - fades out an element from the Y axis by 10px
Fieldset
growSubtlegrowSubtle animation - increases the size of an element from scale(1) - scale(1.15) and back down to scale(1) using transform: scale(1)
IconComponent that renders icons
IconButton
InputInput Component
inputError
InputKeywordSearchComponent used for keyword search functionality
inputSelect
InputSelectInput Select Component
InputTimeTime input with segmented control
InputToggleComponent that creates a checkbox or radio input field
labelText
LinkUniform Link Component
LinkWithRefUniform LinkWithRef Component We recommend using this link <code>next/link</code>
loaderAnimationData
MenuComponent used for creating clickable menus
MenuButton
MenuItemMenuItem Component used along side <Menu /> component
MenuItemInnerMenuItem Component for headless use outside <Menu /> component Use only if adapting Uniform menu item appearance to a non-ariakit menu. This is required because ariakit does not let you use MenuItem outside of a Menu component.
MenuThreeDots
ModalA modal component to open a dialog with a backdrop that covers the whole page.
ModalDialog
ParameterGroup
ParameterImage
ParameterImageInner
ParameterInput
ParameterInputInner
ParameterLink
ParameterLinkInner
ParameterMenuButton
ParameterSelect
ParameterSelectInner
ParameterShellContext
ParameterTextarea
ParameterTextareaInner
ParameterToggle
ParameterToggleInner
richTextToolbarButton
richTextToolbarButtonActive
ripple
scrollbarStylesCustom scrollbar styles
settingsIcon
skeletonLoading
slideInTtb
spin
spinnerAnimationData
SwitchUniform Switch Input Component
TableUniform's Table component
TableBody
TableCellData
TableCellHead
TableFoot
TableHead
TableRow
TAKEOVER_STACK_ID
TextareaTextarea Component
uniformComponentIcon
uniformComponentPatternIcon
uniformCompositionPatternIcon
uniformConditionalValuesIcon
uniformContentTypeIcon
uniformEntryIcon
uniformEntryPatternIcon
uniformLocaleDisabledIcon
uniformLocaleIcon
utilityColorsUniform 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;

Type Aliases

Type AliasDescription
AddButtonProps
AddListButtonProps
AddListButtonThemeProps
AnimationFileProps
AvatarGroupProps
AvatarProps
BadgeProps
BadgeSizeProps
BadgeThemeProps
BadgeThemeStyleProps
BannerProps
BannerType
BoxHeightProps
BreakpointSizeBreakpoint label values
BreakpointsMap
ButtonProps
ButtonSizePropsButton sizes that are available to use with our brand
ButtonThemePropsButton themes that are available to use with our brand
ButtonWithMenuPropsButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes
CalendarProps
CalloutTypeCallout button types available to use with our brand
CaptionProps
CardContainerBgColorProps
CardContainerProps
CardProps
CardTitleProps
CheckboxWithInforProps
ChildFunction
ChipProps
ChipTheme
ComboBoxGroupBase
ComboBoxSelectableItem
ComboBoxSelectableOption
ConnectToDataElementButtonProps
ContainerProps
ConvertComboBoxGroupsToSelectableGroupsOptions
CounterBgColors
CounterIconColors
CounterProps
CreateTeamIntegrationTileProps
DashedBoxProps
DateTimePickerProps
DebouncedInputKeywordSearchProps
DescriptionListProps
DetailsProps
DraggableHandleProps
DrawerContentProps
DrawerContextValue
DrawerProps
DrawersRegistryRecord
EditTeamIntegrationTileProps
ErrorMessageProps
FieldMessageProps
FieldsetProps
HeadingProps
IconColorsets fill color of the svg icon 'default'
IconNameA list of available icon names that can be used with the Uniform brand
IconTypesets the type of icon to use from the available list
InfoMessageProps
InputComboBoxOptionDefault type of option for the combo box. Note: you can use any type of object you want. If it has a <code>label</code> and <code>value</code> property, it will auto wire those. If you want to use different properties, you can use the <code>getOptionLabel</code> and <code>getOptionValue</code> props.
InputComboBoxProps
InputCreatableComboBoxProps
InputInlineSelectOption
InputInlineSelectProps
InputProps
InputSelectProps
InputTimeProps
InputToggleProps
IntegrationComingSoonProps
IntegrationHeaderSectionProps
IntegrationLoadingTileProps
IntegrationModalHeaderProps
IntegrationModalIconProps
IntegrationTileProps
IsoDateStringA string in the ISO 8601 date format: YYYY-MM-DD
IsoDateTimeStringA string in the ISO 8601 datetime format
IsoTimeStringA string in the ISO 8601 time format: hh:mm
JsonEditorProps
KeyValueInputProps
KeyValueItem
LabelProps
LegendProps
LevelPropsAvailable heading weights e.g. 1 - 6
LimitsBarProps
LinkColorProps
LinkListProps
LinkManagerWithRefType
LinkProps
MediaCardProps
MenuButtonProp
MenuGroupProps
MenuItemProps
MenuItemTextThemeProps
MenuThreeDotsProps
ModalDialogProps
ModalProps
MultilineChipProps
ObjectGridContainerProps
ObjectGridItemCardCoverProps
ObjectGridItemCoverButtonProps
ObjectGridItemCoverProps
ObjectGridItemIconWithTooltipProps
ObjectGridItemProps
ObjectGridItemTitleProps
ObjectItemLoadingSkeletonProps
ObjectListItemCoverProps
ObjectListItemHeadingProps
ObjectListItemProps
PageHeaderSectionProps
ParagraphProps
ParameterDataConnectButtonProps
ParameterDrawerHeaderProps
ParameterGroupProps
ParameterImageProps
ParameterInputProps
ParameterLabelProps
ParameterLinkProps
ParameterMenuButtonProps
ParameterMultiSelectOption
ParameterMultiSelectProps
ParameterNameAndPublicIdInputProps
ParameterRichTextInnerProps
ParameterRichTextProps
ParameterSelectProps
ParameterShellProps
ParameterTextareaProps
ParameterToggleProps
PopoverProps
ProgressListItem
ProgressListItemProps
ProgressListProps
RegisterDrawerProps
ResolveIconProps
RhythmProps
RichTextParamValue
ScrollableItemProps
ScrollableListContainerProps
ScrollableListItemProps
ScrollableListProps
SearchableMenuProps
SegmentedControlOption
SegmentedControlProps
SerializedLinkNode
ShortcutReference
SkeletonProps
StatusBulletProps
StatusTypeProps
SuccessMessageProps
SwitchProps
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
TileContainerProps
TileProps
TileTitleProps
ToastContainerProps
TooltipProps
TwoColumnLayoutProps
UniformLogoProps
UseShortcutOptions
WarningMessageProps