Secondary Variant

The .secondary class provides a lower-emphasis visual style for links and buttons. Use it to indicate an alternative or less prominent action in a group of controls.

Links

Apply .secondary to <a> elements or elements with [role="link"] to de-emphasize them.

<a href="#">Primary link</a>
<hr>
<a href="#" class="secondary">Secondary link</a>

Buttons

Apply .secondary to <button> elements or elements with [role="button"] for a secondary action button.

<div role="toolbar">
  <button>Primary</button>
  <button class="secondary">Secondary</button>
</div>

Accordion

Apply .secondary to accordion <summary> elements with role="button" for a secondary expandable section style.

<!-- Secondary accordion -->
<details>
  <summary role="button" class="secondary">Secondary Accordion</summary>
  <p>Ostriches are the largest birds in the world and are native to Africa. They have long, powerful legs that they use to run at high speeds, and they can reach up to 45 miles per hour.</p>
</details>