Components
Overview
Set of components library from multiple brand and platform
Accordion
An element that can expand/collapse to reveal or hide more associated content
Alert
To informing the user of important changes in a prominent way.Alert Dialog
A popup dialog that informs the user of confirmation, warning, or error messages.
Anchor
Actionable text link trigger for user to navigate or use as tertiary call to action
Avatar
Graphical interface to a visual representation of a user, entity or profile
Badge
The visual indicator for the values such as labeling or notification
Bottom Sheet
The bottom sheet is a slides from the bottom of the screen
Breadcrumb
Showing users their position in a website or app's hierarchy for easy backtracking.
Box
Hold other elements, and can be styled to adjust its position, size, and layout
Button
The visual indicator for the values such as labeling or notification
Card
A container, wrap or shell for content representing a single entity
Checkbox
Allow users to selected multiple optional items or selected option agreements
Chips
Allow users to enter information, make selections, filter content, or trigger actions
Container
A container component is a reusable UI element used to group and style other components or content within a web or application interface.
Datepicker
Allow users to pick date
Divider
Line should be used to bring clarity and structure to a layout, section and content
Dropdown
Selecting a value when expanded can shows a list option
File Upload
Simplify file uploads with a user-friendly interface, making data transfer easy and efficient
Flex
Enables flexible layouts for its child elements, allowing for dynamic and responsive design
Image
A visual representation of something
List
Element for displaying and organizing information in an ordered or unordered list format
Modal
A modal component is a pop-up overlay used to display additional information, forms, or actions without navigating away from the current page.
Navigation Bar
Navigation elements are displayed at the top of the screen
Pagination
Dividing and navigating content into manageable pages, when dealing with large data sets
Pin Input
Lorem ipsum dolor sit amet.
Progress Bar
Component is a visual indicator that displays the progression of a task or process.
Progress Circle
Used to visually represent the progress or completion status of a task
Radio Button
For users select one option from list of group option
Rating
User-friendly and versatile tool for rating and feedback, enhancing user interactions
Slider
Intuitive and interactive UI element for selecting values, perfect for customization and engagement
Snackbar
Inform feedback to the users result of the process or action executed
Select Field
For selecting a value when expanded can shows a list of options
Sidebar
Vertical side component that supports navigational elements
Spinner
Animated spinning icon that lets users know content is being loaded
Stepper
To visualize and guiding toward the completion of a specified process.
Switch
Allow users to offers a control to switch the toggle items setting on or off
Tab Bar
To navigate between multiple panels, reducing clutter and fitting more into a smaller space.
Table
For displaying large amounts of data inside the rows and columns
Textarea
Enable the user to interact with long form text which spans over multiple lines
Textfield
Enable the user to interact with spesific input content, value or data
Time Picker
To help and allows users to select a specific time format from field
Tooltip
Shows additional context on tap, focus or hover to help give more information in the interaction
Tree
Hierarchical structure for organizing and simplifying complex information with interaction