Control Button Component

Overview

Control buttons are segmented button groups used in toolbars, control panels, and filtering interfaces. They can be icon-only or include text labels, and support left/right icons with optional dropdown menus.

Segmented groups — Buttons join together with caps: left_cap, middle, right_cap, none
4 sizes — xs (24px), sm (32px), md (40px), lg (48px)
Icon + label support — Can be icon-only or have left/right icons with labels
Active states — Toggle-style highlighting for selected options
Dropdown menus — Optional dropdown indicator with divider

Sizes: Icon-Only Standalone

Control buttons in all four sizes (xs, sm, md, lg) with segment="none" (fully rounded, standalone).

<!-- XS (24px) -->
<button class="elv-control-button elv-control-button--xs elv-control-button--icon-only" type="button" aria-label="Controls">
  <svg class="elv-control-button__icon" viewBox="0 0 20 20">...</svg>
</button>

<!-- SM (32px) -->
<button class="elv-control-button elv-control-button--sm elv-control-button--icon-only" type="button">...</button>

<!-- MD (40px) -->
<button class="elv-control-button elv-control-button--md elv-control-button--icon-only" type="button">...</button>

<!-- LG (48px) -->
<button class="elv-control-button elv-control-button--lg elv-control-button--icon-only" type="button">...</button>

Segmented Icon-Only Group (MD)

Three-segment button group using left_cap, middle, and right_cap. Middle button is in active state.

<div class="elv-control-button-group">
  <button class="elv-control-button elv-control-button--md elv-control-button--icon-only elv-control-button--left-cap" type="button" aria-label="Align left">
    <svg class="elv-control-button__icon">...</svg>
  </button>
  <button class="elv-control-button elv-control-button--md elv-control-button--icon-only elv-control-button--middle is-active" type="button" aria-label="Align center" aria-pressed="true">
    <svg class="elv-control-button__icon">...</svg>
  </button>
  <button class="elv-control-button elv-control-button--md elv-control-button--icon-only elv-control-button--right-cap" type="button" aria-label="Align right">
    <svg class="elv-control-button__icon">...</svg>
  </button>
</div>

Segmented Icon-Only Group (SM)

Smaller 32px toolbar group with four segments showing view mode controls.

<div class="elv-control-button-group">
  <button class="elv-control-button elv-control-button--sm elv-control-button--icon-only elv-control-button--left-cap is-active" type="button" aria-pressed="true">
    <svg class="elv-control-button__icon">...</svg>
  </button>
  <button class="elv-control-button elv-control-button--sm elv-control-button--icon-only elv-control-button--middle" type="button">...</button>
  <button class="elv-control-button elv-control-button--sm elv-control-button--icon-only elv-control-button--middle" type="button">...</button>
  <button class="elv-control-button elv-control-button--sm elv-control-button--icon-only elv-control-button--right-cap" type="button">...</button>
</div>

Buttons with Labels (MD)

Control buttons with text labels. Labels use Elevate Typography component styles (label variant).

<div class="elv-control-button-group">
  <button class="elv-control-button elv-control-button--md elv-control-button--left-cap" type="button">
    <span class="elv-control-button__label">Day</span>
  </button>
  <button class="elv-control-button elv-control-button--md elv-control-button--middle is-active" type="button" aria-pressed="true">
    <span class="elv-control-button__label">Week</span>
  </button>
  <button class="elv-control-button elv-control-button--md elv-control-button--right-cap" type="button">
    <span class="elv-control-button__label">Month</span>
  </button>
</div>

Buttons with Left Icons + Labels (LG)

Larger 48px control buttons combining left icons with text labels. First button is active.

<div class="elv-control-button-group">
  <button class="elv-control-button elv-control-button--lg elv-control-button--left-cap is-active" type="button" aria-pressed="true">
    <svg class="elv-control-button__icon">...</svg>
    <span class="elv-control-button__label">Controls</span>
  </button>
  <button class="elv-control-button elv-control-button--lg elv-control-button--middle" type="button">
    <svg class="elv-control-button__icon">...</svg>
    <span class="elv-control-button__label">Favorites</span>
  </button>
  <button class="elv-control-button elv-control-button--lg elv-control-button--right-cap" type="button">
    <svg class="elv-control-button__icon">...</svg>
    <span class="elv-control-button__label">Add</span>
  </button>
</div>

Buttons with Right Icons (SM)

Small control buttons with labels and right-positioned icons (e.g., sort indicators).

<div class="elv-control-button-group">
  <button class="elv-control-button elv-control-button--sm elv-control-button--left-cap" type="button">
    <span class="elv-control-button__label">Name</span>
    <svg class="elv-control-button__icon">...</svg>
  </button>
  <button class="elv-control-button elv-control-button--sm elv-control-button--middle is-active" type="button" aria-pressed="true">
    <span class="elv-control-button__label">Date</span>
    <svg class="elv-control-button__icon">...</svg>
  </button>
  <button class="elv-control-button elv-control-button--sm elv-control-button--right-cap" type="button">
    <span class="elv-control-button__label">Size</span>
  </button>
</div>

Button with Dropdown Menu (MD)

Control button with integrated dropdown indicator (separated by divider). Standalone button, not part of a group.

<button class="elv-control-button elv-control-button--md" type="button">
  <svg class="elv-control-button__icon">...</svg>
  <span class="elv-control-button__label">Options</span>
  <div class="elv-control-button__dropdown">
    <svg class="elv-control-button__icon">...</svg>
  </div>
</button>

All Sizes Comparison (Icon-Only)

Side-by-side comparison of all four sizes with icon-only buttons in segmented groups.

XS

SM

MD

LG

Interactive Demo: View Switcher

Click to switch between different view modes. Active state persists.

Current view: List

Disabled States

Control buttons in disabled state with reduced opacity and cursor-not-allowed.

<button class="elv-control-button elv-control-button--md elv-control-button--icon-only" type="button" disabled>
  <svg class="elv-control-button__icon">...</svg>
</button>

Usage Guidelines

Segmented groups — Use left_cap, middle, and right_cap to create joined button groups
Active states — Add is-active class and aria-pressed="true" for toggle behavior
Icon sizes — XS/SM buttons use 16px icons, MD/LG use 20px icons
Label sizing — XS/SM buttons use 13px labels, MD/LG use 14px labels
Accessibility — Always include aria-label for icon-only buttons, aria-pressed for toggles
Use cases — Toolbars, view switchers, text alignment, filtering controls, sorting options
Hover states — Background changes to light purple (bg-primary-20), text/fill changes to primary
Focus states — 3px purple outline with subtle shadow for keyboard navigation
Dropdown indicator — Use divider + caret icon for buttons with dropdown menus
Standalone vs. grouped — Use segment="none" for standalone, caps/middle for groups