Comment:
+-----------------------+
Input Controls Button A clickable element that triggers an action. Differentiated by style (primary, secondary, text, icon) to guide users. [ Primary Action ] ( Secondary ) Text Link [ ⚙️ ] Input Controls Checkbox Allows users to select zero, one, or multiple independent options from a list. Does not affect other checkboxes. Interests:
[✓] Design
[ ] Development
[✓] Marketing Input Controls Radio Button Allows users to select only one option from a mutually exclusive set. Selecting one deselects any other. Account Type:
( ) Personal
(•) Business Input Controls Slider Allows users to select a value from a continuous or discrete range by dragging a handle. Used for settings like volume or price range. Price Range: $10 [ ---•------ ] $100 Input Controls Date / Time Picker A specialized input that opens a calendar or clock interface for users to select a specific date or time, preventing formatting errors. Event Date: [ March 15, 2024 🗓️ ] Input Controls File Uploader A component that allows users to select one or more files from their local device to upload to the server. ```[ Choose File... ] profile_picture.jpg Navigation Breadcrumbs A navigation trail that shows the user's current location within the site's hierarchy, allowing them to trace their path back. Home > Products > Laptops > Model XYZ Navigation Pagination A set of controls used to break down a large list of items (like search results or table rows) into separate pages. < Prev [1] 2 3 ... 10 Next > Navigation Stepper An input control for increasing or decreasing a value in small, discrete steps. Common for item quantities in a shopping cart. Quantity: [ - ] 2 [ + ] Information Display Badge / Pill / Tag A small, inline label used to highlight an item's status, count, or category. Visually distinct and scannable. Project Status: [ In Progress ]
Notifications [ 3 ] Information Display Progress Bar A visual indicator that shows the completion status of a task, such as a download, upload, or multi-step form. Uploading... [=============== > ] 75% Information Display Spinner / Loader An animated graphic that indicates a process is ongoing and the user should wait. Used when the wait time is indeterminate. Loading data... ( ↻ ) Information Display Avatar A circular or square image representing a user or entity. Often uses initials as a fallback if no image is available. Users:
(JD) (AS) (👤) Information Display Alert / Banner A prominent, often colorful message box that provides contextual feedback or important information (e.g., success, warning, error). ```+-----------------------------------------+
Grouping & Layout Divider / Separator A thin horizontal or vertical line used to group or separate content, creating visual distinction and improving readability. Section One Content...
-------------------------------------------
Section Two Content... Grouping & Layout Carousel / Image Slider A rotating slideshow of content (images, cards, testimonials). Saves vertical space but can hide content from users. < [ Image 2 of 5 ] >
o ● o o o Text & Content Blockquote A stylized block of text used to display a quotation or excerpt from another source. It is visually offset from the main content. > "The key to great design is capturing the
> spirit of the client and the essence of
> the space."
- John Doe, Designer Text & Content Code Block A formatted block of text used to display code snippets. It uses a monospace font and often has syntax highlighting.
function greet() {
console.log("Hello!");
}
No comments:
Post a Comment