Button patterns help solicit action from a user in a clean and consistent manner. These elements are commonly used to submit a form or direct a user's attention towards a primary call-to-action.
Use the button component <crds-button>
. The custom button with classes should only be used if the crds-button does not have support for what is needed.
<crds-button text="Crds Button" color="blue"></crds-button>
Use color=""
attribute on the component to select the color of the button.
<crds-button text="Blue Primary" color="blue"></crds-button>
<crds-button text="Orange Primary" color="orange"></crds-button>
<crds-button text="Gray Primary" color="gray"></crds-button>
<crds-button text="Gray Light Primary" color="gray-light"></crds-button>
<div class="bg-charcoal soft-quarter">
<crds-button text="White Primary" color="white"></crds-button>
</div>
Add display="outline"
to create an outline button style.
<crds-button text="Blue Primary" color="blue" display="outline"></crds-button>
<crds-button text="Orange Primary" color="orange" display="outline"></crds-button>
<crds-button text="Gray Primary" color="gray" display="outline"></crds-button>
<crds-button text="Gray Light Primary" color="gray-light" display="outline"></crds-button>
<div class="bg-charcoal soft-quarter">
<crds-button text="White Primary" color="white" display="outline"></crds-button>
</div>
To create a link style add display="link"
. Also add color="orange"
because this is the link color used across the board.
<crds-button text="Link" color="orange" display="link"></crds-button>
Adding size="lg"
or size="sm"
will increase or decrease your button element.
<p>
<crds-button text="Large Button" color="blue" size="lg"></crds-button>
<crds-button text="Large Button" color="blue" display="outline" size="lg"></crds-button>
</p>
<p>
<crds-button text="Button" color="blue" size="default"></crds-button>
<crds-button text="Button" color="blue" display="outline" size="default"></crds-button>
</p>
<p>
<crds-button text="Small Button" color="blue" size="sm"></crds-button>
<crds-button text="Small Button" color="blue" display="outline" size="sm"></crds-button>
</p>
To create a block level button, which spans the width of its parent, add block="true"
. If you want to create a block level button only on mobile, add block-mobile="true"
.
<div>
<crds-button text="Block Button" color="blue" block="true"></crds-button>
<crds-button text="Block Button" color="blue" block="true" display="outline"></crds-button>
</div>
<div>
<crds-button text="Mobile Block Button" color="blue" block-mobile="true"></crds-button>
<crds-button text="Mobile Block Button" color="blue" block-mobile="true" display="outline"></crds-button>
</div>
To add an icon to the button, add icon="" icon-size="" icon-color=""
. If you would like the icon on the left side of the text add icon-align="left"
. To see a list of the icons click here.
<crds-button text="Blue Primary" color="blue" icon="youtube" icon-size="20" icon-color="white"></crds-button>
<crds-button text="Orange Primary" color="orange" icon="github" icon-size="20" icon-color="blue"></crds-button>
<crds-button text="Blue Primary" color="blue" icon="link" icon-size="20" icon-color="white"></crds-button>
<crds-button text="Orange Primary" color="orange" icon="download" icon-size="20" icon-color="blue"></crds-button>
If you would like to get a better look at the Button component, check it out in the Component Library