An exploration of common button types and their functions across interfaces.
This button represents the most important action a user can take on a page. It is usually visually distinct, often using a strong color, and placed prominently. Examples include "Submit," "Sign Up," or "Add to Cart."
Used for less critical actions that are still important. These buttons typically have a less dominant visual style than primary buttons, often using outlines or muted colors. Examples include "Cancel," "Save Draft," or "View Details."
For actions that are secondary to secondary actions, or often used in a series of links that function as buttons. They usually have the most understated appearance, often just text with a hover effect. Examples: "Learn More," "Read Article," or "Edit Profile."
A button designed for actions that have irreversible or potentially negative consequences, such as deleting data. These are often styled in red or a similar warning color to draw attention and require user confirmation. Examples: "Delete Account," "Remove Item," or "Discard Changes."
A button that uses an icon instead of text to represent an action. These are common for actions like search (magnifying glass), settings (gear), or closing (X). Their meaning is conveyed through the universally understood symbol.
Buttons that allow a user to switch between two states, such as on/off, enabled/disabled, or selected/unselected. Their visual appearance changes to indicate the current state. Examples: a "Notifications" toggle or a "Dark Mode" switch.
Clicking these will perform a simulated action. Notice how their styling reflects their intended purpose.