Interactivity is at the heart of user experience design. By incorporating interactive elements, you can create a more engaging and dynamic interface that responds to user input and adapts to their needs.
Buttons are the primary means of interaction in JET UI. They come in various styles, such as primary, secondary, tertiary, and quaternary, each serving different purposes. The JETButton component allows for easy customization with icons, toggled states, and dropdown functionality. Four main styles are available: primary, secondary, tertiary, and quaternary. Each style can be further customised with props like icon, toggled, and dropdown.
Timed buttons can be used for actions that require a delay or confirmation, such as destructive operations or to prevent accidental clicks. The timer visually indicates the waiting period, and the button can either auto-click or become enabled after the timer completes. Use the timer prop to set the duration and the autoClickAfterTimer or enableAfterTimer props to control the button's behavior after the timer ends.
Dropdowns are useful for displaying additional options or actions without cluttering the interface. They can be toggled to show or hide content, and can also be used in conjunction with other buttons for more complex interactions. The JETButton component supports dropdown functionality with the dropdown prop.
Circular buttons are icon-only buttons that provide a compact way to trigger actions. They are often used for quick access to frequently used features, such as settings or notifications. The JETButton component supports circular styles with icons for a clean and modern look using the icon prop being passed in without any text.
Typography is a fundamental aspect of user interface design, influencing readability, accessibility, and the overall aesthetic of your application. Well-chosen fonts, sizes, and weights help users quickly scan content, understand hierarchy, and engage with your product. Consistent typography ensures a professional and cohesive look across all screens and devices.
JET UI provides a robust set of typography components, such as Title, Subtitle, and Heading, to help you structure your content effectively. These components are designed to be flexible and accessible, supporting custom icons, dividers, and responsive sizing. By leveraging these components, you can maintain a clear visual hierarchy and improve the user experience throughout your application.
This is a paragraph demonstrating the default text styling in JET UI.
This is a smaller text for less important information.
This is the smallest text size, typically used for footnotes or disclaimers.
Organising content and interface elements is crucial for creating intuitive and efficient user experiences. A well-organised UI helps users find information quickly, reduces cognitive load, and guides them through workflows seamlessly. Grouping related actions, using clear labels, and providing visual separation all contribute to a more usable interface.
JET UI offers layout and space components, such as GenericSpace and Aura, to help you structure your application. These components allow you to segment content into logical sections, apply consistent padding and spacing, and visually distinguish different areas of your app. By using these tools, you can create interfaces that are both visually appealing and easy to navigate.