1.
Button
A tappable or clickable element that performs an action when triggered. We will go more in depth on this later in this module.
1.
Button
A tappable or clickable element that performs an action when triggered. We will go more in depth on this later in this module.
2.
Icon Button
A button that uses only an icon instead of text for compact actions.
2.
Icon Button
A button that uses only an icon instead of text for compact actions.
3.
Split Button
A button with an icon button section that opens secondary actions.
3.
Split Button
A button with an icon button section that opens secondary actions.
4.
Text Field
A single-line input for entering short text like names or emails.
4.
Text Field
A single-line input for entering short text like names or emails.
5.
Text Area
A multi-line input for writing longer messages or comments.
5.
Text Area
A multi-line input for writing longer messages or comments.
6.
Checkbox
A small square that can be checked or unchecked to toggle options.
6.
Checkbox
A small square that can be checked or unchecked to toggle options.
Weekend Adventure Plans
7.
Radio Button
A circular selector used for choosing one option from a group.
7.
Radio Button
A circular selector used for choosing one option from a group.
Choose your favorite mythical creature
Choose your favorite mythical creature
Choose your favorite mythical creature
8.
Switch (Toggle)
A toggle control for enabling or disabling settings.
8.
Switch (Toggle)
A toggle control for enabling or disabling settings.
9.
Dropdown - Single Select
A menu that reveals a list of options when clicked. Allows only 1 item to be selected.
9.
Dropdown - Single Select
A menu that reveals a list of options when clicked. Allows only 1 item to be selected.
10.
Dropdown - Multi-Select
A menu that reveals a list of options when clicked. Allows selecting multiple values.
10.
Dropdown - Multi-Select
A menu that reveals a list of options when clicked. Allows selecting multiple values.
11.
Combobox
A text input that also offers selectable suggestions or options.
11.
Combobox
A text input that also offers selectable suggestions or options.
12.
Date Picker
A control for selecting dates from a calendar UI.
12.
Date Picker
A control for selecting dates from a calendar UI.
13.
Time Picker
A control for selecting time values.
13.
Time Picker
A control for selecting time values.
14.
Slider
A draggable bar used to select a value within a range.
14.
Slider
A draggable bar used to select a value within a range.
15.
Porgress Bar
A horizontal bar that visually indicates task completion.
15.
Porgress Bar
A horizontal bar that visually indicates task completion.
16.
Porgress Circle
A circular version of the progress bar.
16.
Porgress Circle
A circular version of the progress bar.
17.
Loading Spinner
An animated icon showing that something is loading.
17.
Loading Spinner
An animated icon showing that something is loading.
18.
Modal / Dialog
A pop-up window that interrupts the flow to ask for input or show info.
18.
Modal / Dialog
A pop-up window that interrupts the flow to ask for input or show info.
🎉 Awesome!
Something amazing just happened! This is your fun modal with delightful animations.
19.
Popover
A small overlay that appears near a UI element for additional content.
19.
Popover
A small overlay that appears near a UI element for additional content.
19.
Popover
A small overlay that appears near a UI element for additional content.
20.
Tooltip
A brief message that appears on hover or tap to explain something.
20.
Tooltip
A brief message that appears on hover or tap to explain something.
20.
Tooltip
A brief message that appears on hover or tap to explain something.
21.
Snackbar / Toast
A small, transient message shown at the bottom of the screen.
21.
Snackbar / Toast
A small, transient message shown at the bottom of the screen.
21.
Snackbar / Toast
A small, transient message shown at the bottom of the screen.
22.
Banner
A top or bottom message bar used for warnings, alerts, or updates.
22.
Banner
A top or bottom message bar used for warnings, alerts, or updates.
22.
Banner
A top or bottom message bar used for warnings, alerts, or updates.
23.
Card
A container with padding and border used to group related content.
23.
Card
A container with padding and border used to group related content.
23.
Card
A container with padding and border used to group related content.
24.
Chip (Tag)
Small labels used to represent categories, filters, or selections.
24.
Chip (Tag)
Small labels used to represent categories, filters, or selections.
24.
Chip (Tag)
Small labels used to represent categories, filters, or selections.
25.
Accordian
A collapsible section that hides or reveals more content.
25.
Accordian
A collapsible section that hides or reveals more content.
25.
Accordian
A collapsible section that hides or reveals more content.
26.
Tabs / Tab Bar
A set of buttons that switch between views or sections.
26.
Tabs / Tab Bar
A set of buttons that switch between views or sections.
26.
Tabs / Tab Bar
A set of buttons that switch between views or sections.
27.
Stepper
A multi-step control that guides users through a process.
27.
Stepper
A multi-step control that guides users through a process.
27.
Stepper
A multi-step control that guides users through a process.
28.
Breadcrumbs
A horizontal trail showing where the user is in a site hierarchy.
28.
Breadcrumbs
A horizontal trail showing where the user is in a site hierarchy.
28.
Breadcrumbs
A horizontal trail showing where the user is in a site hierarchy.
29.
Pagination
Navigation controls to browse through multiple pages.
29.
Pagination
Navigation controls to browse through multiple pages.
29.
Pagination
Navigation controls to browse through multiple pages.
30.
Empty State
A screen shown when no data or content is available.
30.
Empty State
A screen shown when no data or content is available.
30.
Empty State
A screen shown when no data or content is available.
31.
Skeleton Loader
A placeholder layout shown while content is loading.
31.
Skeleton Loader
A placeholder layout shown while content is loading.
31.
Skeleton Loader
A placeholder layout shown while content is loading.
32.
Notification Center
The
32.
Notification Center
The
32.
Notification Center
The
Notifications
5Welcome!
Your account has been successfully created. Welcome to our platform!
New Feature Available
Check out our latest feature that helps you manage your notifications better.
Payment Due Soon
Your subscription payment is due in 3 days. Please update your payment method.
Sync Failed
We couldn't sync your data. Please check your internet connection and try again.
System Maintenance
Scheduled maintenance will occur tonight from 2-4 AM EST. Some features may be unavailable.
33.
OTP Field
Input fields designed for one-time passcodes.
33.
OTP Field
Input fields designed for one-time passcodes.
33.
OTP Field
Input fields designed for one-time passcodes.
Password Field
A secure text input where characters are hidden.
A secure text input where characters are hidden.
Rating Input
A star or numeric input for rating content or experience.
A star or numeric input for rating content or experience.
File Upload / Dropzone
UI for selecting and uploading files, sometimes with drag-and-drop.
UI for selecting and uploading files, sometimes with drag-and-drop.
Calendar View
A full calendar layout showing dates and events.
A full calendar layout showing dates and events.
Tree View
A hierarchical list of items that can expand or collapse.
A hierarchical list of items that can expand or collapse.
Timeline
A vertical or horizontal display of events in sequence.
A vertical or horizontal display of events in sequence.
Wizard Flow
A step-by-step interface to complete a complex task.
A step-by-step interface to complete a complex task.
Form Validation
Automatic checking of user input to ensure accuracy.
Automatic checking of user input to ensure accuracy.
Inline Error
Error messages shown directly near the input field.
Error messages shown directly near the input field.
Sticky Header
A header that remains at the top of the page during scroll.
A header that remains at the top of the page during scroll.
Filter Panel
A collapsible section for narrowing down results or data.
A collapsible section for narrowing down results or data.
Inline Edit
Edit data directly within the table or content block.
Edit data directly within the table or content block.
Inline Edit
Edit data directly within the table or content block.
Edit data directly within the table or content block.
Z-Index Layer
Indicates depth stacking of elements visually.
Indicates depth stacking of elements visually.
Focus Ring
A visual outline shown when navigating with the keyboard.
A visual outline shown when navigating with the keyboard.
Avatar
A circular image representing a user.
A circular image representing a user.