High-signal button styles for primary, secondary, and supporting actions. Browse seeded references, compare source code, and use the filter controls below to narrow the list.
Use search, difficulty filter, and sort order to tighten the list before opening an individual reference page.
A caution-first button pattern for destructive actions that need clear warning without a heavy solid fill.
Destructive actions need higher caution cues without forcing every dangerous action into a filled red button.
A compact icon-only button pattern for dense toolbars where space is limited and quick mode switching matters.
Icon-only buttons work best in dense toolbars when each action still has a clear accessible label in the final product.
A compact pill button with a leading icon for create, add, or quick-start actions.
The preview keeps a compact toolbar feel while still showing loading and completion feedback.
High-emphasis action button with a rounded shape and clear hover feedback.
Switch between resting, loading, success, and disabled states to inspect how the primary action changes emphasis.
A lighter button treatment for supporting actions that still need to stay visible.
Secondary actions usually need fewer states, but hover and disabled treatments should still stay easy to compare.
A split button pattern for one primary action with closely related alternatives such as schedule, save draft, or publish now.
Split buttons are useful when one primary action has closely related alternatives.