2. Components

Components

Components are the reusable building blocks of our design system. They provide consistency, accessibility, and flexibility, ensuring a seamless user experience across all interfaces. Each component serves a specific purpose and works together to create intuitive interactions.

Amazium’s component library offers a cohesive and scalable approach to UI design. By using these pre-built components, you can ensure a consistent look and feel while maintaining accessibility across different devices and screen sizes.

1. Avatar

   An avatar is a visual representation of a user or entity. It is commonly used in profiles, comments, and user interfaces to provide identity context.

2. Badge / Pill

   A badge is a small indicator that displays counts, statuses, or notifications. It helps users quickly grasp important numerical values like tallies or scores.

3. Blockquote

   Used to highlight quoted text, blockquotes provide visual emphasis and distinction within a content section.

4. Button

   Buttons trigger actions and events. They guide users by clearly indicating what will happen next upon interaction.

5. Card

   Cards are structured containers that group related content together, making it easier to scan and interact with information.

6. Code Block

   Displays inline or block-styled code snippets, making technical content easier to read and reference.

7. Dynamic table

   A dynamic table is a flexible data display component that supports sorting, filtering, and pagination for managing large datasets efficiently.

8. Image

   A responsive image component that automatically adapts to light and dark themes, ensuring optimal visibility in different viewing modes.

9. List

   Lists help organize content into structured, easy-to-read formats, improving readability and navigation.

10. Modal dialog

    A modal dialog is an overlay component that displays critical content, requiring user interaction before continuing.

11. Section message

    Section messages are used to highlight important alerts or contextual information within a page, ensuring users don’t miss key details.