Buttons - Component | Crossroads Digital Design Kit

UI Components / Buttons

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.

Crds-Button

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>

Solid Color Options

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>

Outline Color Options

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>

Link Style

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>

Sizes

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>

Block Display Buttons

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>

Icons

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>

More Info on this Component

If you would like to get a better look at the Button component, check it out in the Component Library