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.
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."
Text and Icon
Pair an icon with text to improve recognition about an object or action.
Use to visually communicate an object or action in limited space. Include alternative text to describe what button does.
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.
To ensure that usage of this component complies with accessibility guidelines:
- For icon-only buttons, provide
aria-labeltext that describes the button's action
- Apply keyboard interaction patterns as described on REI universal design and accessibility: Buttons
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
- Do not add
role="button"to the CdrButton component