Components
Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
Avatar
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
Badge
A number or status mark on buttons and icons.
Button
Buttons are clickable elements that are used to trigger actions.
Card
Integrate information in a card container.
Cascader
If the options have a clear hierarchical structure, Cascader can be used to view and select them.
Chart
The data visualization components.
Checkbox
A group of options for multiple choices.
Dropdown
Toggleable menu for displaying lists of links and actions.
Loading
Show animation while loading data.
Input
Input data using mouse or keyboard.
Modal
Informs users while preserving the current page state.
Navigation
Menu that provides navigation for your website.
Notification
Displays a global notification message at a corner of the page.
Numeric Input
Input numerical values with a customizable range.
Pagination
If you have too much data to display in one page, use pagination.
Phone input
TBD
Popover
Display prompt information for mouse hover.
Radio
Single selection among multiple options.
Select
When there are plenty of options, use a drop-down menu to display and select desired ones.
Slider
Drag the slider within a fixed range.
Steps
Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
Switch
Switch is used for switching between two opposing states.
Table
Display multiple data with similar format. You can sort, filter, compare your data in a table.
Tabs
Divide data collections which are related yet belong to different types.
Tag
Used for marking and selection.
Picker
Use for date time input.
Tooltip
Display prompt information for mouse hover.
Message
Used to show feedback after an activity.
Tree
Display a set of data with hierarchies.
InfiniteScroll
Load more data while reach bottom of the page.