Components

  • Alert

    A small box to quickly grab the user's attention and communicate a brief message.

  • Anchor

    The anchor component creates a hyperlink targeting a specific location within the same page or a different one.

  • Avatar

    A circular identification element that prominently showcases the user's customized profile picture or their first and last name initials.

  • Badge

    Badges are easily scannable visual identifiers that help categorize items of a same nature on a page.

  • Blockquote

    Indicates the quotation of a large selection of text from another source.

  • Breadcrumbs

    Navigate a folder hierarchy quickly with a table and breadcrumbs.

  • Button

    Buttons allow users to take actions and make choices with a single tap or click.

  • ButtonGroup

    A button group is a set of buttons with similar functionality.

  • Carousel

    A slideshow component for cycling through elements.

  • Checkbox

    Allows the user to make one or more choices within a list of options.

  • Code

    Display a short piece of code within some regular text.

  • Color picker

    A panel containing swatches for selecting colors.

  • ComboBox

    A dropdown list that allows users to type a value to filter the options.

  • Date picker

    Used for selecting dates on a calendar to set timeframes, deadlines, and more.

  • Dialog

    Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

  • Divider

    A divider can be used to separate a layout into different sections of content or element.

  • Dropdown menu

    The dropdown menu displays a list of selectable choices and options.

  • Expandable block

    A pattern for progressive disclosure of information.

  • Fieldset

    A fieldset is a container grouping interactive components together.

  • File upload

    Allow the user to upload files from their system.

  • Flex

    A utility component that makes it easier to work with CSS flexbox and iTwinUI design tokens.

  • Footer

    Legally required links that stick to the bottom of entry pages.

  • Header

    Header sits at the top of a page and is part of a consistent user experience and navigation.

  • InformationPanel

    A side panel for viewing additional information without leaving the main context.

  • Input

    An input lets users enter and edit data.

  • Input grid

    Used to display form elements with label and/or status message.

  • Input group

    Input let users enter and edit data.

  • Input with decorations

    Input component with various additional decorations

  • Kbd

    This component is used to display which key or combination of keys performs a given action.

  • LinkAction

    Helps create accessible block links or buttons.

  • List

    Used to display a list of items that can optionally be interactive.

  • MiddleTextTruncation

    A utility component for truncating long texts in the middle.

  • Non ideal state

    A full page error layout.

  • NotificationMarker

    Shows a notification marker dot at the top right of the component.

  • Overlay

    Overlays hide content from the user with a blur effect and loading indicator.

  • Panels

    Generic and simplistic component for most sliding multi-panel UIs.

  • Popover

    An overlay dialog placed next to a trigger element.

  • Progress indicator

    Progress indicators express the length of in-progress operations.

  • Radio

    Allows the user to choose only one of a predefined set of mutually exclusive options.

  • Radio Tile

  • SearchBox

    A search input component

  • Select

    A select, also known as a dropdown menu, displays a list of selectable choices and options.

  • Side navigation

    A left side expandable / collapsable navigation menu.

  • SkipToContentLink

    A skip-to-content link helps keyboard users quickly navigate to the main content.

  • Slider

    Sliders let users make selections from a range of values.

  • Status message

    Component to display icon and text below the form field.

  • Stepper

    Keep the user informed on their progress by dividing content into logical steps.

  • Surface

    The Surface container allows content to appear elevated through the use of a drop shadow.

  • Table

    Data tables display sets of data.

  • Tabs

    Tabs make it easy to explore and switch between different views or functional aspects of an app, or to browse categorized data sets.

  • Tag

    A tag is a user-generated keyword associated with certain items to categorize them and make them easily discoverable.

  • Textarea

    A multiline text box.

  • ThemeProvider

  • Tile

    Tiles, also known as cards, contain content and actions about a single subject.

  • Toast

    A toast is a non-disruptive message that provides feedback based on a user action.

  • Toggle switch

    The toggle switch is a high contrast component used for toggling settings that only have two states.

  • Tooltip

    Tooltips display informative text when users hover, focus, or tap an interactive element.

  • TransferList

    The TransferList component is used to transfer items between two lists.

  • Tree

    A tree provides a hierarchical lists of data with nested expandable levels.

  • Typography

  • Visually hidden

    A utility component content visually but keeps it accessible to assistive technologies.

Edit this page on GitHub Provide feedback on GitHub