Buttons
Use buttons to signal actions.
Primary Button
Main Styling
Ghost Styling
Button Variations
Button Sizes
Wide Buttons
Large Button W/ Arrow
Special Buttons
White Ghost Button
Use over colored (non-white) backgrounds.
Orange Button
Use mainly for Checkout or Place Order actions.
Purple Button
Use in Reorder section, and related actions like Add to List.
Red/Destructive Button
Only use this button in edge cases where the customer will delete data or cancel a service.
Disabled Button
High Contrast Styling
These button colors are used while in High Contrast Mode.
Green Button
Orange Button
Purple Button
Accessibility
- Use
<button>tags to create buttons - Buttons should display a visible focus state when users tab to them.
- Avoid using
<div>or<img>tags to create buttons. Screen readers don't automatically know either is an usable button. - When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.