Home

/

Design System - Component

Style

Component

This design system is crafted to ensure consistency and ease of use in application development. It includes a variety of elements such as tags/badges, accordions, buttons, modals, cards, inputs, checkboxes, dropdowns, menus, and icons. Each component comes with different variations and states to meet diverse interaction and appearance needs. By using these components, you can build responsive, intuitive, and aesthetically pleasing user interfaces. This system is also designed to enhance development efficiency with elements optimized for performance and accessibility.

Tags

Tags (also known as Badges) are components that indicate a brief label. They are commonly used to label or inform about a status (such as Paid, Cancelled, Pending, or other statuses). These tags also play an important role in designing tables within a dashboard.

Accordion

Accordion is a wrapper that contains several sections arranged vertically in which there is content that can be opened and closed. Structurally, there are 2 parts in the accordion, namely Header and Content (Body), generally used for FAQ content or curriculum lists, etc.

Buttons

Button is an interactive element that users can click to execute a command or action, such as submitting a form, starting a process, or navigating to another page.

Modal

Modal functions to display important and urgent information. Behaviorally, he appears at the top of a page and requires us to focus on making decisions at that moment.

Card

The Cards component is a group of elements that have related information, both content and actions.

Input

Input is a component used to retrieve information in free text or number format.

Checkbox

The checkbox functions to provide a choice of one or more items in a list.

Dropdown

Dropdown functions to display a set of options, navigation links or a command/action.

Select

Select is an input component that functions to retrieve data from the user. What's unique is that he gives a set of options and chooses only one of them.

Menu

Select is an input component that functions to retrieve data from the user. What's unique is that he gives a set of options and chooses only one of them.

Icons

Style

Style

Style