Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Button hierarchy
Primary, secondary and outline actions with deliberate emphasis.
primarysecondary
Accessibility
All actions use native buttons and distinct text labels.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Quiet and destructive buttons
Ghost and destructive actions with accurate visual weight.
ghostdestructive
Accessibility
The destructive action is named explicitly and not identified by colour alone.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Icon buttons
Text and icon-only controls with accessible names.
iconslabels
Accessibility
The icon-only control has an explicit accessible label.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Loading and disabled states
Non-interactive examples of unavailable and in-progress actions.
loadingdisabled
Accessibility
Loading text is exposed through a status message; disabled state uses the native attribute.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.