Icon Button

Reference: Elevate Lookbook | Specs: DESIGN.md (Buttons)

Sizes

Extra Small (24px), Small (32px), Medium (40px), Large (48px) 

<button class="elv-icon-button elv-icon-button--primary elv-icon-button--xs" type="button" aria-label="Search">
  <span class="material-symbols-outlined">search</span>
</button>

<button class="elv-icon-button elv-icon-button--primary elv-icon-button--sm" type="button" aria-label="Search">
  <span class="material-symbols-outlined">search</span>
</button>

<button class="elv-icon-button elv-icon-button--primary elv-icon-button--md" type="button" aria-label="Search">
  <span class="material-symbols-outlined">search</span>
</button>

<button class="elv-icon-button elv-icon-button--primary elv-icon-button--lg" type="button" aria-label="Search">
  <span class="material-symbols-outlined">search</span>
</button>

Primary Style

Purple background (#5746b2), white icon. Use for main actions. 

<button class="elv-icon-button elv-icon-button--primary elv-icon-button--md" type="button" aria-label="Add">
  <span class="material-symbols-outlined">add</span>
</button>

Secondary Style

Transparent with border. Use for secondary actions. 

<button class="elv-icon-button elv-icon-button--secondary elv-icon-button--md" type="button" aria-label="Filter">
  <span class="material-symbols-outlined">filter_list</span>
</button>

Tertiary Style

Transparent, purple icon. Use for tertiary actions. 

<button class="elv-icon-button elv-icon-button--tertiary elv-icon-button--md" type="button" aria-label="More options">
  <span class="material-symbols-outlined">more_vert</span>
</button>

Primary Brand Style

Rorange background (#ff492c), white icon. Use for brand-specific actions. 

<button class="elv-icon-button elv-icon-button--primary-brand elv-icon-button--md" type="button" aria-label="G2 Home">
  <span class="material-symbols-outlined">home</span>
</button>

Primary Inverted Style

White background with border, purple icon. Use on dark backgrounds. 

<button class="elv-icon-button elv-icon-button--primary-inverted elv-icon-button--md" type="button" aria-label="Search">
  <span class="material-symbols-outlined">search</span>
</button>

With Tooltips

Icon buttons should always have tooltips for clarity. Hover to see tooltips. 

<button
  class="elv-icon-button elv-icon-button--primary elv-icon-button--md"
  type="button"
  aria-label="Add to favorites"
  aria-describedby="tooltip-fav"
  data-tooltip-trigger>
  <span class="material-symbols-outlined">favorite</span>
  <div class="elv-tooltip" role="tooltip" id="tooltip-fav" data-position="top">
    Add to favorites
  </div>
</button>

Usage Notes