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.
Definition
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).
Definition
Core Components List
- Accordion
- Avatar
- Badge Info
- Badge Count
- Button
- Button Group
- Button Icon
- Button Toggle
- Button Segmented
- Bottom Sheet
- Carousel
- Chat bubble
- Checkbox
- Chip
- Comment
- Divider
- Dropdown Menu
- Progress Indicator
- Progress Stepper
- Radio
- Ratings
- Search
- Slider
- Steppers
- Tabs
- Textarea
- Text input
- Toast
- Toggle Switch
- Tooltip
Design System Component Definitions
- Accordion: A collapsible panel for displaying or hiding content.
- Avatar: A user’s graphical representation, often a photo or icon.
- Badge Info: Small overlay conveying informational details or status.
- Badge Count: Small indicator showing the number of unread items.
- Button: Interactive element triggering specific actions.
- Button Group: Collection of related buttons displayed together.
- Button Icon: Button featuring an icon to represent action.
- Button Toggle: Button that switches between two states.
- Button Segmented: Group of buttons acting as one segmented control.
- Bottom Sheet: Slide-up panel for extra content or actions.
- Carousel: Rotating slider displaying multiple items sequentially.
- Chat Bubble: Graphical container for individual chat messages.
- Checkbox: Binary input for true/false or yes/no options.
- Chip: Compact element representing input, attribute, or action.
- Comment: User’s text response or opinion in a thread.
- Divider: Line separating different sections of content.
- Dropdown Menu: Collapsible list appearing upon user interaction.
- Progress Indicator: Visual representation of task completion status.
- Progress Stepper: Visual guide through multi-step processes.
- Radio: Selectable button for mutually exclusive choices.
- Ratings: User’s score evaluation for services or products.
- Search: Input field for finding specific content.
- Slider: Graphical control for selecting a value range.
- Steppers: Controls for incrementing or decrementing a value.
- Tabs: Different sections of content displayed separately.
- Textarea: Multi-line input field for user’s text.
- Text Input: Single-line field for user’s text entry.
- Toast: Brief, auto-dismissing notification for user.
- Toggle Switch: Control for switching between two states.
- Tooltip: Contextual message appearing on hover or click.
Leave a Reply