Molecules
typically designed as styled links, aim to capture users'
attention and guide them in a specific direction. Buttons
enable the linking to other pages or the completion of tasks,
such as form submissions or online purchases.
enable users to input text into a user interface, commonly appearing in forms and dialogs. The design of text field components should ensure a clear affordance for interaction, enhancing their discoverability in layouts, efficiency in filling them out, and accessibility.
inform users of a process that an app has performed or
will perform. It indicates brief, informative message that appears
when a user interacts with an element in a graphical user interface
will perform. It indicates brief, informative message that appears
when a user interacts with an element in a graphical user interface
- The Date/Time picker is used with the Selectbox/Dropdown menu.
- Displays for users to select a date and time and the picker is displayed when the dropdown is clicked. (Not hovered)
-
It is used with other components and cannot be used alone.
- Components such as avatars and icons use badges to indicate new notifications.
- It can be used with just color/numbers/text.
- Use to adjust the volume, such as speakers/mics, on the Settings page.
- Please use it to set a specific range in various situations, such as image/text size and sound setting.
- There are only two status values, Enabled/Disabled, and no status values when hover.
are compact, interactive element that represent choices or actions within a user interface. They allow quick selections, filtering options or displaying information in a visually appealing format.
is an expandable and collapsible component that organizes content in a space-efficient manner. It allows users to reveal or hide sections of information, making it easier to navigate complex data without overwhelming the interface. Designed for clarity and usability, the Accordion enhances user experience by promoting interactive exploration while maintaining a clean layout.