Accordion
Accordion
Accordions are collapsable sections that allow toggle between hiding and showing large amount of content.
Activity Indicator
Activity Indicator
Displays a indicator hinting the user for some activity operation happened, or has been triggered.
Alert
Alert
Alerts are used to inform and provide the user with a choice of actions.
Avatar
Avatar
An icon or figure representing a particular user.
Badge
Badge
Badges provide quick visual identification for numeric values such as tallies and other quantities.
Blockquote
Blockquote
Indicates that the enclosed text is an extended quotation.
Breadcrumbs
Breadcrumbs
Breadcrumbs are links that act as a type of secondary navigation that reveals the user’s location in a website or Web application.
Button
Button
Buttons make common actions and navigation easy to perform.
Caption
Caption
Provides details in situations where content is compact and space is tight.
Card
Card
Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.
Carousel
Carousel
The carousel component allows a series of content to cycle horizontally.
Checkbox
Checkbox
Checkboxes allow the user to select one or more items from a set.
Collapsible
Collapsible
The collapsible component is used to put long sections of information under a block that users can expand or collapse.
Drawer
Drawer
Drawers slide in from the edge of the screen and are used to display content.
Dropdown
Dropdown
A menu that offers a list of options. The title of the menu, or the currently-selected item in the list, is always displayed.
Drop zone
Drop zone
The drop zone component lets users upload files by dragging and dropping the files into an area on a page, or activating a button.
Input field
Input field
Inputs are used to capture textual information as well as numbers and passwords.
Label
Label (Pill, Bubble, Lozenges, Stamp)
A way of visually tagging UI objects for quick recognition and navigation. Can include an action icon (usually ‘remove’).
Link
Link
Links take users to another place, and usually appear within or directly following a sentence.
List group
List group
This list component can be used to display content in the form of a tappable list.
Modal
Modal
Modals are used to display content or views that are separate from the rest of the app or page.
Navigation
Navigation
Used to display the primary navigation in the header. Navigation includes a list of links that users use to move between sections of a website/app.
Notification
Notification
Notifications are messages that communicate information to the user. Usually with dismisal button.
Nudger
Nudger
Nudgers allow users to quickly specify a value within a given range.
Overlay
Overlay
The overlay component applies a dark tint to its content.
Pagination
Pagination
Use pagination to let users move through an ordered collection of items that has been split into pages.
Progress bar
Progress bar
The progress bar component is used to visually represent the completion of a task or operation.
Radio
Radio
Use radio buttons to present each item in a list of options where users must make a single selection.
Range slider
Range slider
A range slider is an input field that users can use to select a numeric value within a given range.
Scrollspy
Scrollspy
A component that automatically updates links in a navigation list based on the current scroll position.
Spinner
Spinner
Spinners are used to notify users that their action is being processed.
Tab
Tab
Use to alternate among related views within the same context.
Table
Table
A component for displaying data in a tabular form.
Tag
Tag (Chip, Breadbox, Token)
Keywords used for associating data sets. Can include an action icon (usually ‘remove’).
Text Area
Text Area
Used to capture larger pieces of text.
Thumbnail
Thumbnail
A visual anchor and identifier for an object. They should be used along with text to provide context.
Toast
Toast
A non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.
Toggle
Toggle
Allow users to toggle between two states, on or off.
Tooltip
Tooltip
Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.
No one is always right
I use feedback to improve UI Crux Platform. If you noticed a mistake, please report it.