Design System Components

What are components?

Components are reusable, functional blocks of user interface with a defined appearance and behavior, like buttons, input fields, or checkboxes. Components accelerate the design process and maintain visual coherence.


What are Sub-Components?

Sub-Components are elements that reside within larger components, contributing to their functionality and appearance. For instance, a checkbox (component) might include a label (sub-component).


Core Components List

  1. Accordion
  2. Avatar
  3. Badge Info
  4. Badge Count
  5. Button
  6. Button Group
  7. Button Icon
  8. Button Toggle
  9. Button Segmented
  10. Bottom Sheet
  11. Carousel
  12. Chat bubble
  13. Checkbox
  14. Chip
  15. Comment
  16. Divider
  17. Dropdown Menu
  18. Progress Indicator
  19. Progress Stepper
  20. Radio
  21. Ratings
  22. Search
  23. Slider
  24. Steppers
  25. Tabs
  26. Textarea
  27. Text input
  28. Toast
  29. Toggle Switch
  30. Tooltip

Design System Component Definitions

  1. Accordion: A collapsible panel for displaying or hiding content.
  2. Avatar: A user’s graphical representation, often a photo or icon.
  3. Badge Info: Small overlay conveying informational details or status.
  4. Badge Count: Small indicator showing the number of unread items.
  5. Button: Interactive element triggering specific actions.
  6. Button Group: Collection of related buttons displayed together.
  7. Button Icon: Button featuring an icon to represent action.
  8. Button Toggle: Button that switches between two states.
  9. Button Segmented: Group of buttons acting as one segmented control.
  10. Bottom Sheet: Slide-up panel for extra content or actions.
  11. Carousel: Rotating slider displaying multiple items sequentially.
  12. Chat Bubble: Graphical container for individual chat messages.
  13. Checkbox: Binary input for true/false or yes/no options.
  14. Chip: Compact element representing input, attribute, or action.
  15. Comment: User’s text response or opinion in a thread.
  16. Divider: Line separating different sections of content.
  17. Dropdown Menu: Collapsible list appearing upon user interaction.
  18. Progress Indicator: Visual representation of task completion status.
  19. Progress Stepper: Visual guide through multi-step processes.
  20. Radio: Selectable button for mutually exclusive choices.
  21. Ratings: User’s score evaluation for services or products.
  22. Search: Input field for finding specific content.
  23. Slider: Graphical control for selecting a value range.
  24. Steppers: Controls for incrementing or decrementing a value.
  25. Tabs: Different sections of content displayed separately.
  26. Textarea: Multi-line input field for user’s text.
  27. Text Input: Single-line field for user’s text entry.
  28. Toast: Brief, auto-dismissing notification for user.
  29. Toggle Switch: Control for switching between two states.
  30. Tooltip: Contextual message appearing on hover or click.
Posted by

Leave a Reply

Your email address will not be published. Required fields are marked *