Home > @uniformdev/design-system

design-system package

Classes

ClassDescription
LinkNode

Enumerations

EnumerationDescription
DateTimePickerVariant

Functions

FunctionDescription
IconsProvider({ children })Provider to the Icon component
Image_2({ alt, src, className, imgClassName, variant, width, height, ...imgAttribs })
InputComboBox(props)InputComboBox
macifyShortcut(shortcut)
Pagination({ limit, offset, total, onPageChange, })
ParameterDataResource({ label, labelLeadingIcon, id, onConnectDatasource, caption, disabled, children, })
ParameterImagePreview({ imageSrc })
ProgressBar({ current, max, theme, variant, ...props })
ShortcutContext({ children })
ShortcutRevealer({ shortcut, macShortcut, className, })
Tooltip({ children, title, placement, visible, withoutPortal, ...props })
useDateTimePickerContext()Use this context for slots within the date time picker in order to manipulate the current value
useIconContext()
useShortcut({ handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, })

Interfaces

InterfaceDescription
ActionButtonsProps
CalloutProps
DateTimePickerValue
DrawerItem
DrawerRendererItemProps
DrawerRendererProps
IconButtonProps
IconProps
ImageProps
InputKeywordSearchProps
LoadingIconProps
LoadingOverlayProps
MenuProps
ProgressBarProps

Variables

VariableDescription
accessibleHidden
AddButtonAdd button component
AddListButtonUniform Add List Button Component
addPathSegmentToPathnameJoins different variants of parent relative url with path segment. Path can be "", "/" and "/foo/bar"
AnimationFileSee https://lottiereact.com/ for example documentation
AvatarA component to render rounded avatars of a user or an app.
AvatarGroupRenders avatars in a group with the ability to truncate the list. This component works best when the <Avatar> component are direct children.
BadgeUniform Badge Component
BannerUniform Banner Component
borderTopIcon
breakpointsObject of breakpoints and the pixel values
button
ButtonUniform Button Component
buttonAccentAltDark
buttonAccentAltDarkOutline
buttonDestructive
buttonGhost
buttonGhostDestructive
buttonGhostUnimportant
buttonPrimary
buttonPrimaryInvert
buttonRippleEffect
buttonSecondary
buttonSecondaryInvert
buttonTertiary
buttonTertiaryOutline
buttonUnimportant
ButtonWithMenuUniform ButtonWithMenu Component
CalendarA Calendar Grid which allows the user to navigate and select a date.
CalloutUniform Callout Component
canvasAlertIcon
CaptionComponent that provides caption text to input fields
Card
CardContainerUniform Card Container
cardIcon
CardTitle
CHECKBOX_OPERATORS
CheckboxWithInfo
ChipChips 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
Container
Counter
cqContainer Query Helper Function
CreateTeamIntegrationTile
CurrentDrawerContext
customIcons
DashedBoxUniform Dashed Box Component
DATE_OPERATORS
DateTimePickerDate Time Picker
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).
Details
DismissibleChipActionDismissible chip action should be used with the Chip component
DrawerA drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
DrawerContent
DrawerProviderProvides the context to the Drawer and DrawerRenderer components.
DrawerRendererRenders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
EditTeamIntegrationTileUniform Edit Team Integration Tile
ErrorMessageComponent that provides error messaging to input fields
extractParameterPropsA function that extracts all common props and element props
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
FilterButton
FilterControls
FilterItem
FilterItems
FilterMenu
fullWidthScreenIcon
getDrawerAttributes
getParentPath
getPathSegment
growSubtlegrowSubtle animation - increases the size of an element from scale(1) - scale(1.15) and back down to scale(1) using transform: scale(1)
HeadingComponent that sets the heading tag
HexModalBackground
HorizontalRhythm
IconComponent that renders icons
IconButton
ImageBroken
imageTextIcon
infoFilledIcon
InfoMessageComponent that provides info messaging to input fields
InlineAlertUniform Inline Alert Component
input
InputInput Component
inputError
InputInlineSelectInput Inline Select
InputKeywordSearchComponent used for keyword search functionality
inputSelect
InputSelectInput Select Component
InputTimeTime input with segmented control
InputToggleComponent that creates a checkbox or radio input field
IntegrationComingSoonUniform Integration Coming Soon Component
IntegrationHeaderSectionUniform Integration Header Section Component
IntegrationLoadingTileUniform Integration Loading Tile
IntegrationModalHeaderUniform Integration Modal Header
IntegrationModalIconUniform Integration Modal Icon
IntegrationTile
isMacLike
isSecureURL
isValidUrl
JsonEditor
jsonIcon
Label
LabelLeadingIcon
labelText
Legend
LimitsBarUniform Limits Bar Component
LinkUniform Link Component
LinkList
LinkWithRefUniform LinkWithRef Component We recommend using this link <code>next/link</code>
loaderAnimationData
LoadingCardSkeleton
LoadingIconLoading Icon
LoadingIndicatorLoading Indicator
LoadingOverlayLoading Overlay. NOTE: the container/parent element must have a non-static <code>position</code> value for the overlay to work properly.
MediaCard
MenuComponent used for creating clickable menus
MenuGroup
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.
MenuItemSeparator
ModalA modal component to open a dialog with a backdrop that covers the whole page.
mqMedia Query Helper Function
MultilineChipA 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.
NUMBER_OPERATORS
numberInput
PageHeaderSection
ParagraphComponent for generic paragraph tags
ParameterDrawerHeader
ParameterGroup
ParameterImage
ParameterImageInner
ParameterInput
ParameterInputInner
ParameterLabel
ParameterLink
ParameterLinkInner
ParameterMenuButton
ParameterNameAndPublicIdInput
ParameterOverrideMarker
ParameterRichText
ParameterRichTextInner
ParameterSelect
ParameterSelectInner
ParameterShellUniform Parameter shell component
ParameterShellContext
ParameterShellPlaceholder
ParameterTextarea
ParameterTextareaInner
ParameterToggle
ParameterToggleInner
Popover
ProgressListComponent that sets the base structure for scrollable content in a max height container
ProgressListItem
queryStringIcon
rectangleRoundedIcon
replaceUnderscoreInString
ResolveIconUniform Resolve Icon Component
RICHTEXT_OPERATORS
richTextToolbarButton
richTextToolbarButtonActive
RichTextToolbarIcon
ripple
ScrollableListComponent that sets the base structure for scrollable content in a max height container
ScrollableListInputItem
ScrollableListItemComponent used within <ScrollableList /> for adding interactive button components with predefined styles
scrollbarStylesCustom scrollbar styles
SearchAndFilter
SearchAndFilterContext
SearchAndFilterOptionsContainer
SearchAndFilterProvider
SearchAndFilterResultContainer
SegmentedControlHorizontal control with multiple segments. Can be used as a replacement of radio buttons.
settings
settingsIcon
SkeletonA loading skeleton
skeletonLoading
slideInTtb
spinnerAnimationData
StatusBullet
structurePanelIcon
SuccessMessageComponent that provides success messaging to input fields
supportsMedia Query Helper Function
SwitchUniform Switch Input Component
SYSTEM_FIELD_OPERATORS
TabButton
TabButtonGroup
TabContent
TableUniform's Table component
TableBody
TableCellData
TableCellHead
TableFoot
TableHead
TableRow
Tabs
TAKEOVER_STACK_ID
TakeoverDrawerRenderer
TextareaTextarea Component
TEXTBOX_OPERATORS
textInput
ThemeUniform CSS Variables, font provider and optional reset stylesheet
Tile
TileContainerUniform Tile Container Component
TileText
ToastContainerA component to render toasts in your app. This component is supposed to be used just once in your app. Typically inside _app.tsx
TwoColumnLayout
UniformBadgeUniform Badge Logo
UniformLogoUniform Logo
UniformLogoLarge
useBreakpointReturns the name of the current breakpoint. Built on top of https://github.com/streamich/react-use/blob/master/docs/createBreakpoint.md
useCloseCurrentDrawer
useCurrentDrawer
useCurrentTab
useDrawer
useOutsideClick
useParameterShell
useSearchAndFilter
VerticalRhythm
warningIcon
WarningMessageComponent that provides warning messaging to input fields
yesNoIcon

Type Aliases

Type AliasDescription
AddButtonProps
AddListButtonProps
AddListButtonThemeProps
AnimationFileProps
ArrowPositionProps
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
ConnectToDataElementButtonProps
ContainerProps
CounterProps
CreateTeamIntegrationTileProps
DashedBoxProps
DateTimePickerProps
DebouncedInputKeywordSearchProps
DescriptionListProps
DetailsProps
DrawerContentProps
DrawerContextValue
DrawerProps
DrawersRegistryRecord
EditTeamIntegrationTileProps
ErrorMessageProps
FieldsetProps
Filter
FilterButtonPropsbeta - filter button type
FilterEditor
FilterItemsProps
filterMode
FilterOption
FilterRowProps
FiltersProps
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
InlineAlertProps
InputComboBoxOption
InputComboBoxProps
InputInlineSelectOption
InputInlineSelectProps
InputOption
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
LabelProps
LegendProps
LevelPropsAvailable heading weights e.g. 1 - 6
LimitsBarProps
LinkColorProps
LinkListProps
LinkManagerWithRefType
LinkProps
MediaCardProps
MenuGroupProps
MenuItemProps
MenuItemTextThemeProps
ModalProps
MultilineChipProps
Operator
OperatorType
OperatorValue
OperatorValueType
PageHeaderSectionProps
ParagraphProps
ParameterDataConnectButtonProps
ParameterDrawerHeaderProps
ParameterGroupProps
ParameterImageProps
ParameterInputProps
ParameterLabelProps
ParameterLinkProps
ParameterMenuButtonProps
ParameterNameAndPublicIdInputProps
ParameterRichTextInnerProps
ParameterRichTextProps
ParameterSelectProps
ParameterShellProps
ParameterTextareaProps
ParameterToggleProps
PopoverProps
ProgressListItem
ProgressListItemProps
ProgressListProps
RegisterDrawerProps
ResolveIconProps
RhythmProps
RichTextParamValue
ScrollableItemProps
ScrollableListContainerProps
ScrollableListItemProps
ScrollableListProps
SearchAndFilterContextProps
SearchAndFilterOptionsContainerProps
SearchAndFilterProps
SearchAndFilterProviderProps
SearchAndFilterResultContainerProps
SegmentedControlOption
SegmentedControlProps
SerializedLinkNode
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