Buttons

Invoke and communicate an action that will occur

Primary

Use primary buttons for actions to complete a task or move forward in a process such as "Add to cart." There is only 1 primary action per major page section.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Secondary

Use secondary buttons for all actions that do not move the user to the next step or are additional user actions such as "Add to wish list" or "Find a campout near you."

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Text and Icon

Pair an icon with text to improve recognition about an object or action.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Icon Only

Use to visually communicate an object or action in limited space. Include alternative text to describe what button does.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Sizing

Change the button size based on where button is used. Default size is medium. Small is used for supplemental user actions such as product comparison or filter. Large is used for "Add to cart" on product pages or Call to Action.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:


This component has no specific WCAG compliance attributes built into the control. It is possibile to define this component as a link or button:

  • Select the semantically correct element, which will ensure that assistive technologies have correct instructions for how to interact with the component
  • Use the CdrLink component to make a button that looks like a link
  • Do not use div or input elements
  • Do not add role="button" to the CdrButton component