Buttons

The button style can be applied to both buttons and links.

Default button

Use the button class to add button styles to links or buttons.

Here's a link.

<a href="#" class="button">Default button</a>

We still apply the class even when it's a proper <button>. This ensures we don't pollute other use cases of the <button> element.

<button class="button">Default button</button>

Button colors

Buttons come in many colors.

The default button uses your theme's primary color.

<ca-flex gap="2" wrap="">
  <button class="button">Primary</button>
  <button class="button button-gray">Gray</button>
  <button class="button button-yellow">Yellow</button>
  <button class="button button-red">Red</button>
  <button class="button button-magenta">Magenta</button>
  <button class="button button-orange">Orange</button>
  <button class="button button-green">Green</button>
  <button class="button button-blue">Blue</button>
  <button class="button button-purple">Purple</button>
  <button class="button button-coastal">Coastal</button>
  <button class="button button-desert">Desert</button>
  <button class="button button-mountain">Mountain</button>
  <button class="button button-valley">Valley</button>
</ca-flex>

Include icons

Icons can be added to buttons.

<button class="button">
  <ca-pic icon="account-circle"></ca-pic>
  <!-- This will work without the <span> too. -->
  <span>Login</span>
</button>

Specialty buttons

By modifying the button's CSS variables, different looks are possible.

Here's the button for utility icons as seen throughout the layout.

<a href="#" class="button button-utility">
  <ca-pic icon="account-circle"></ca-pic>
</a>

We can add text too.

Utility

<a href="#" class="button button-utility">
  <ca-pic icon="account-circle"></ca-pic>
  <span>Utility</span>
</a>