UI components are reusable elements like buttons, forms, and navigation bars that ensure a consistent user experience, improve development efficiency, and maintain a unified design across the system.
Button
Color-code buttons by role (primary, secondary, etc.) with sufficient contrast for readability.
Provide button variants (primary, secondary, etc.) based on context.
Adjust button size based on layout; smaller for compact areas, larger for primary actions.
Use icons with text to clarify purpose; provide labels if icons are used alone.
Indicate interactivity with hover effects (e.g., color change or shadow).
Provide visual feedback (e.g., inset effect or color shift) when pressed.
Show a loading indicator (e.g., spinner) for actions that take time.
Disabled buttons should be visually distinct (e.g., grayed out) to prevent interaction.
Ensure the button announces its role and state for assistive technologies.
Include a visible focus ring for keyboard navigation accessibility.
Modal
Modals should support various content types and flexible layouts.
Include clear actions like “Confirm” or “Cancel” for user response.
Provide an easy close option, such as a close button or swipe gesture.
Center modals on screen, with options for sliding in from sides or bottom.
Adjust modal size based on content for adaptability.
Shift focus to the first element on open and trap focus until closed.
Ensure keyboard navigation, including closing with the Esc key.
Include a clear title and accessibility labels for screen readers.
Alert / Toast Notification
Make alerts visually distinguishable by role (error, success, etc.) with sufficient contrast.
Use icons to clarify intent (e.g., warning for errors, checkmark for success), especially for color blindness.
Include action buttons (e.g., “Retry” or “Undo”) that are contextually relevant.
Ensure alerts are responsive, expanding to full width on mobile for readability.
Announce role and message content to users with assistive technologies for accessibility.
Avatar
Mask images into desired shapes (e.g., circular, square) and ensure responsiveness.
Provide a fallback (initials or icon) if the image is unavailable.
Offer multiple size options to suit different contexts.
Use background colors for avatars without images, ensuring good contrast with text/icons.
Support multiple shapes (circular, square) based on design context.
Stack or group avatars when displaying multiple users.
Include accessibility labels for non-decorative avatars, especially for user representation.
Badge
Use distinct colors for different statuses (e.g., red for alerts, green for success) with good contrast.
Vary appearance based on context (e.g., subtle for non-essential, bold for critical).
Offer size flexibility; large for visibility, small for compact areas.
Include icons to enhance meaning, especially in limited space.
Provide a dismiss action when badges are no longer needed.
Use color and shape to convey meaning when badges appear without text.
Position badges near related UI elements (e.g., notification count).
Card
Support various content types (e.g., text, images, forms).
Ensure media layout (images, videos) is visually appealing.
Include actionable elements (buttons/links) at the bottom or side.
Design cards to be responsive, expanding to full width on mobile.
Group multiple cards for a cohesive display (e.g., item list).
Navigation Bar
Position the navbar at the top or side, ensuring visibility and accessibility during scrolling (fixed or sticky).
List navigation items with a logical hierarchy, grouping related items.
Use dropdowns for large menus that open on hover or click.
Highlight the active item to indicate the current section.
Integrate a search bar for easy content discovery.
Collapse navigation into a hamburger menu on mobile to save space.
Ensure the navbar is keyboard-navigable and supports screen readers with proper ARIA roles.
Pagination
Make alerts visually distinguishable by role (error, success, etc.) with sufficient contrast.
Use icons to clarify intent (e.g., warning for errors, checkmark for success), especially for color blindness.
Include action buttons (e.g., “Retry” or “Undo”) that are contextually relevant.
Ensure alerts are responsive, expanding to full width on mobile for readability.
Announce role and message content to users with assistive technologies for accessibility.
Accordian
Group content into collapsible sections for better structure.
Use visual cues like arrows or icons to show expand/collapse actions.
Ensure smooth animations for expanding or collapsing sections.
Allow users to expand and collapse sections as needed.
Keep section titles clear and accessible for quick navigation.
Enable keyboard control for expanding/collapsing sections.
Use appropriate ARIA roles and labels for screen readers.
Remember the last expanded section on reload or revisit.
Date Picker
Activate the date picker by clicking on an input field or date icon, opening a calendar.
Allow navigation between months/years, with a clear and distinct calendar.
Display the selected date within the input field, updating visually.
Indicate the start and end dates when selecting a range.
Define date boundaries and provide feedback for invalid selections.
Ensure accessibility with keyboard navigation and screen reader support, using proper ARIA attributes.
© 2025 A Product of Figrfast systems Private Limited. All rights reserved