Accordion
Accordions are collapsable sections that allow toggle between hiding and showing large amount of content.
Activity Indicator
Displays a indicator hinting the user for some activity operation happened, or has been triggered.
Alert
Alerts are used to inform and provide the user with a choice of actions.
Avatar
An icon or figure representing a particular user.
Badge
Badges provide quick visual identification for numeric values such as tallies and other quantities.
Blockquote
Indicates that the enclosed text is an extended quotation.
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
Buttons make common actions and navigation easy to perform.
Caption
Provides details in situations where content is compact and space is tight.
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
The carousel component allows a series of content to cycle horizontally.
Checkbox
Checkboxes allow the user to select one or more items from a set.
Collapsible
The collapsible component is used to put long sections of information under a block that users can expand or collapse.
Drawer
Drawers slide in from the edge of the screen and are used to display content.
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
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
Inputs are used to capture textual information as well as numbers and passwords.
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
Links take users to another place, and usually appear within or directly following a sentence.
List group
This list component can be used to display content in the form of a tappable list.
Modal
Modals are used to display content or views that are separate from the rest of the app or page.
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
Notifications are messages that communicate information to the user. Usually with dismisal button.
Nudger
Nudgers allow users to quickly specify a value within a given range.
Overlay
The overlay component applies a dark tint to its content.
Pagination
Use pagination to let users move through an ordered collection of items that has been split into pages.
Progress bar
The progress bar component is used to visually represent the completion of a task or operation.
Radio
Use radio buttons to present each item in a list of options where users must make a single selection.
Range slider
A range slider is an input field that users can use to select a numeric value within a given range.
Scrollspy
A component that automatically updates links in a navigation list based on the current scroll position.
Spinner
Spinners are used to notify users that their action is being processed.
Tab
Use to alternate among related views within the same context.
Table
A component for displaying data in a tabular form.
Tag (Chip, Breadbox, Token)
Keywords used for associating data sets. Can include an action icon (usually ‘remove’).
Text Area
Used to capture larger pieces of text.
Thumbnail
A visual anchor and identifier for an object. They should be used along with text to provide context.
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
Allow users to toggle between two states, on or off.
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.
