Buttons

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

Default button

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

Here's a link.

<a href="#" class="ca-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="ca-button">Default button</button>

Button colors

Buttons come in many colors.

The default button uses your theme's primary color.

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

Include icons

Icons can be added to buttons.

<button class="ca-button">
  <ca-icon name="account"></ca-icon>
  <!-- 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="ca-button ca-button-utility">
  <ca-icon name="account"></ca-icon>
</a>

We can add text too.

Utility

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

With decorations

We can use ca-tip to add tooltips, and ca-badge to add status counters.

Unread messages

<a href="#" class="ca-button ca-button-utility">
  <ca-icon name="mail"></ca-icon>
  <ca-badge>9</ca-badge>
  <ca-tip>Unread messages</ca-tip>
</a>