Foundational interactive elements that enable user actions and workflow navigation.
Enable users to initiate functions, submit data, and perform operations with clear affordances.
Guide users through processes, open dialogs, and control application state changes.
Communicate system states, loading progress, and action outcomes to users.
Submit forms, save data, and validate user input
Toggle features, switch modes, and control application state
Open overlays, navigate between views, and control user flow
Start, stop, pause operations and manage workflows
Use buttons for actions that change application state. Use links for navigation and accessing external resources.
Use buttons for actions requiring confirmation. Use toggles for immediate state changes and settings that take effect instantly.
Use buttons for primary actions visible on the interface. Use menu items for secondary actions grouped within dropdowns or context menus.
| Component | Primary Use | Action Type | Visual Weight | Example Context |
|---|---|---|---|---|
| Button | Actions & State Changes | Immediate execution | High visibility | Submit, Save, Delete |
| Link | Navigation & References | Page transition | Text-integrated | Go to page, Open docs |
| Toggle | Binary State Control | Instant toggle | Focused utility | Dark mode, Notifications |
| Icon Button | Space-constrained Actions | Quick actions | Minimal footprint | Close, Edit, More options |
| Menu Item | Grouped Actions | Contextual actions | Hidden until revealed | Dropdown options, Context menus |
| Tab | View Switching | Content filtering | Persistent navigation | Overview, Details, Settings |
Buttons should look clickable and indicate their interactive nature through visual design
Users should be able to predict what will happen when they click a button
Visual weight should match the importance of the action
Button labels and styling should match the current context and user goals
| Component | Primary Use | Action Type | Visual Weight | Example Context |
|---|---|---|---|---|
| Button | Actions & State Changes | Immediate execution | High visibility | Submit, Save, Delete |
| Link | Navigation & References | Page transition | Text-integrated | Go to page, Open docs |
| Toggle | Binary State Control | Instant toggle | Focused utility | Dark mode, Notifications |
| Icon Button | Space-constrained Actions | Quick actions | Minimal footprint | Close, Edit, More options |
| Menu Item | Grouped Actions | Contextual actions | Hidden until revealed | Dropdown options, Context menus |
| Tab | View Switching | Content filtering | Persistent navigation | Overview, Details, Settings |
Buttons should look clickable and indicate their interactive nature through visual design
Users should be able to predict what will happen when they click a button
Visual weight should match the importance of the action
Button labels and styling should match the current context and user goals