Buttons

Button classes can be applied to both button elements and anchor tags. Use a <button> when the element triggers an action, such as submitting a form or firing JavaScript. Use an <a> when the element navigates to another page or another location on the page.

Primary Button

Default Button Button Link Sample

<button class="cmp-button" type="button">Default Button</button>
<a href="#" class="cmp-button">Button Link Sample</a>

Secondary Button

This should only be used when displayed on a dark background.

Border Button Border Link Sample

<button class="cmp-button cmp-button--border" type="button">
  Border Button
</button>
<a href="#" class="cmp-button cmp-button--border">Border Link Sample</a>

Narrow Modifier

Narrow Button Narrow Link Sample

<button class="cmp-button cmp-button--narrow" type="button">
  Narrow Button
</button>
<a href="#" class="cmp-button cmp-button--narrow">Narrow Link Sample</a>

Short Modifier

Short Button Short Link Sample

<button class="cmp-button cmp-button--short" type="button">Short Button</button>
<a href="#" class="cmp-button cmp-button--short">Short Link Sample</a>

Full Width Modifier

Full Width Button Full Width Link Sample

<button class="cmp-button cmp-button--full-width" type="button">
  Full Width Button
</button>
<a href="#" class="cmp-button cmp-button--full-width">Full Width Link Sample</a>

Icon - Left Aligned

Button Sample Button Link Sample

<button class="cmp-button cmp-button--has-icon" type="button">
  Button Sample
  <svg class="cmp-button__icon cmp-button__icon--left" aria-hidden="true">
    <use xlink:href="#icon-arrow-down"></use>
  </svg>
</button>
<a href="#" class="cmp-button cmp-button--has-icon">
  Button Link Sample
  <svg class="cmp-button__icon cmp-button__icon--left" aria-hidden="true">
    <use xlink:href="#icon-arrow-down"></use>
  </svg>
</a>

Icon - Right Aligned

Button Sample Button Link Sample

<button class="cmp-button cmp-button--has-icon" type="button">
  Button Sample
  <svg class="cmp-button__icon cmp-button__icon--right" aria-hidden="true">
    <use xlink:href="#icon-arrow-down"></use>
  </svg>
</button>
<a href="#" class="cmp-button cmp-button--has-icon">
  Button Link Sample
  <svg class="cmp-button__icon cmp-button__icon--right" aria-hidden="true">
    <use xlink:href="#icon-arrow-down"></use>
  </svg>
</a>

Color Modifier

Red Button Athens Button Olympic Link Sample

<button class="cmp-button cmp-button--red" type="button">Red Button</button>
<button class="cmp-button cmp-button--athens" type="button">
  Athens Button
</button>
<a href="#" class="cmp-button cmp-button--olympic">Olympic Link Sample</a>

Accessibility

The button component includes the following accessibility features:

• The type attribute defaults to "button" to prevent unintended form submission. Set type="submit" explicitly on form submit buttons.
• When an icon is present, the <svg> receives aria-hidden="true" so screen readers skip the decorative graphic and rely on the visible text as the accessible name.

When implementing buttons, also consider:

• Use <button> for actions (form submissions, toggles, JavaScript-driven behavior) and <a> for navigation to a URL. Mixing these roles confuses assistive technology.
• For icon-only buttons (no visible text), add aria-label or a visually hidden <span> describing the action.
• Disabled buttons should use the disabled attribute so they are announced as unavailable and removed from the tab order.
• Do not suppress the focus ring — all button variants maintain visible focus styles for keyboard navigation.