The building blocks of every interface.
UI elements are grouped by function. Each component below is live — click, type, hover and drag to learn how it behaves, and read the design tip under each one.
1. Input Controls
Elements that let users enter data, make selections, or submit information.
Buttons
Text, icon, floating action (FAB), ghost, and split buttons.
One primary button per view. Use ghost/text buttons for secondary actions so the main path stands out.
Text Fields / Input Boxes
Single-line inputs, multi-line text areas, search bars, and password fields.
Always pair inputs with a visible label — placeholders vanish when you type and aren't a substitute.
Checkboxes
Select one or many options from a list.
Checkboxes are independent: each one can be on or off regardless of the others.
Radio Buttons
Exactly one option from a mutually exclusive set.
Use radios when there are ≤ 5 options and users benefit from seeing them all; otherwise use a dropdown.
Toggles / Switches
Binary on/off controls that apply instantly.
A toggle takes effect immediately. If the change needs a "Save" button, use a checkbox instead.
Dropdown Menus (Select Boxes)
An expandable menu for picking from a list.
Order options logically (alphabetical, by frequency) and preselect a sensible default.
Sliders / Range Pickers
Continuous or stepped adjustment along a track.
Show the current value. Sliders are great for "roughly this much", poor for exact numbers.
Date & Time Pickers
Calendars and clocks for scheduling.
For birthdays, three typed fields beat scrolling a calendar back 30 years.
Steppers
Increment / decrement counters, e.g. quantity.
Set min/max limits and disable the button at the boundary.
File Uploaders
Drag-and-drop zones or browse buttons.
State accepted file types and size limits up front, and show the file name after selection.
3. Informational & Display Components
Show content, status, or structure.
Cards
Self-contained containers grouping info, media, and actions.
Mountain Retreat
3 nights · from $240
Hierarchy inside a card: media → title → meta → actions.
Icons
Glyphs that represent actions, objects, or ideas.
Only universally recognised icons (home, search, trash) work without a label. Label the rest.
Badges / Chips / Tags
Compact labels for status, counts, or categories.
Badges show counts, chips are interactive filters, tags are static labels.
Tooltips
Small popups on hover or focus.
Don't hide critical info in tooltips — touch users can't hover.
Progress Bars & Loading Spinners
System status and task completion.
Determinate bar when you know the duration; spinner when you don't. Past ~10s, show progress.
Avatars
Profile images, initials, or placeholders.
Initials with a consistent colour per person beat a generic silhouette.
Accordion / Disclosure
Expand/collapse sections to save space.
What is an accordion?
A stack of headers that reveal content when clicked.
When should I use one?
FAQs and long settings pages where users need only a few sections.
When not to?
When users need to compare content across sections.
Built here with native <details> — accessible for free.
Dividers / Separators
Lines creating visual breaks.
Section A
Try whitespace first. Reach for dividers only when spacing alone isn't enough.
4. Feedback & Containers (Overlays & Dialogs)
Alert users, capture focus, or offer contextual options.
Modals / Dialogs
Foreground window that requires action to dismiss.
Use modals sparingly — for destructive or blocking decisions. Esc should close them.
Banners / Alerts
Prominent notices: info, success, warning, error.
Pair colour with an icon and text — colour alone fails colour-blind users.
Snackbars / Toasts
Ephemeral, non-intrusive notifications.
Auto-dismiss after ~4s. Offer "Undo" instead of a confirm dialog for reversible actions.
Bottom Sheets
Mobile surface sliding up from the bottom.
Easy to reach with a thumb; let users swipe down or tap outside to dismiss.
Popovers / Context Menus
Floating containers tethered to an anchor.
Close on outside click and Esc. Keep menus short; group destructive items last.
5. Data & Structure Elements
Present complex or aggregated data legibly.
Tables
Rows and columns with sorting and filtering.
| Name ⇅ | Role ⇅ | Age ⇅ |
|---|
Left-align text, right-align numbers. Click headers to sort.
Lists
Ordered, unordered, and rich lists.
- Unordered
- No sequence
- Ordered
- Has sequence
- AKAisha KhanSent you a file · 2m
- RSRohan ShahCommented on your design · 1h
Rich lists: primary text bold, secondary muted, leading visual for fast scanning.
Dashboards / Data Visualizations
KPI stat blocks, trend cards, and charts.
Bar = compare, line = trend over time, pie = parts of a whole (≤ 5 slices).
Built as a live reference — inspect the source to see how each one works.