Components are interactive building blocks for creating a user interface. They can be organized into six categories based on their purpose: Action, communication, containment, navigation, selection, and text input.

UI components or user interface elements are the most integral part of product design, regardless of whether it’s a web design or mobile, desktop, Augmented Reality, or Virtual Reality app. UI elements are the core building blocks for all products. UI elements are what allow for a good user experience and well-designed functionalities.

1. Action components help people achieve an aim.

• **Buttons help people take action, such as sending an email, sharing a document, or liking a comment.**
  • Choose the type of button based on the importance of the action. The more important the action is, the more emphasis its button should have.
  • All buttons have fully rounded corners
  • There are four common color mappings for buttons, each with a light and dark theme
• **Extended floating action buttons (extended FABs) help people take primary actions. They're wider than FABs to accommodate a text label and a larger target area.**
  • Extended FABs are the most prominent type of button
  • Use an extended FAB to provide persistent access to a primary action above long-scrolling surface content
  • Because it has room for both a text label and an icon, the extended FAB can be more effective where an icon alone might be too ambiguous
• **The FAB (Floating action buttons) represents the most important action on a screen. It puts key actions within reach.**
  • Use a FAB for the most common or important action on a screen
  • Icons in a FAB must be clear and understandable since these buttons do not have a text label
  • The FAB should persist on the screen when content is scrolling
• **Icon buttons help people take supplementary actions with a single tap**
  • Icon buttons can take the form of a wide range of system icons
  • Ensure the meaning of the icon is unambiguous
  • On hover, include a tooltip that describes the button’s action, rather than the name of the icon itself
  • Use the outline-style icons to indicate an unselected state and a filled style to indicate the selection
• **Segmented buttons help people select options, switch views, or sort elements**
  • Segmented buttons were previously known as toggle buttons
  • Single-select segmented buttons are used to select a single option, switch between views or sort elements
  • Multi-select segmented buttons are used to select multiple options from a group of options or filter elements

2. Communication components provide helpful information.

• **Badges convey dynamic information, such as counts or status. A badge can include labels or numbers.**
  • Use badges with navigation items to convey dynamic information associated with that destination
  • Small badges use only shape to indicate a status change or new notification
  • Large badges display numbers within a container to indicate a quantifiable status change
• **Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form.**
  • Progress indicators look and animate in ways that reflect the status of a process. They are never simply decorative.
  • Progress indicators use animation to capture attention and inform users of an activity’s progress
  • Progress indicators should be applied to all instances of a process (such as loading) in a consistent format (linear or circular)
• **Snackbars provide brief messages about app processes at the bottom of the screen.**
  • Snackbars provide updates on an app’s processes
  • Dismissive snackbars appear temporarily and disappear on their own without requiring user input. Non-dismissive snackbars persist until the user takes an action or selects the close affordance.
  • Snackbars are placed in the most suitable area of the UI