Adobe Spectrum Logospectrum-css 2.7.0

Spectrum
4

Accordion

Precursor
CSS Unverified

The default variant of accordion

Header 1
Item 1
Header 2
Item 1
Header 2
Item 1
Header 3
Item 1
Show Markup
<div class="spectrum-Accordion">
  <div class="spectrum-Accordion-item is-open">
    <div class="spectrum-Accordion-itemHeader" tabindex="0">Header 1</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item is-disabled">
    <div class="spectrum-Accordion-itemHeader">Header 2</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item">
    <div class="spectrum-Accordion-itemHeader" tabindex="0">Header 2</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item">
    <div class="spectrum-Accordion-itemHeader" tabindex="0">Header 3</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
</div>

Action Button

Canon
CSS Verified

The default variant of Action Button









Show Markup
<button class="spectrum-ActionButton">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton is-selected">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>


<button class="spectrum-ActionButton is-selected" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

Action Button - Quiet

Canon
CSS Verified

An Actionbutton that is quiet





Show Markup
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

Action Menu

Beta Precursor
CSS Unverified

Simply an action button with a Popover. Note that the is-selected class should be applied to the button when the menu is open. Also note the accessibility roles are different for an action menu vs a normal menu.



Show Markup
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 1</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 2</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 3</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 1</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 2</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 3</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>

Alert - Closable

Beta Precursor
CSS Unverified

An Alert with a close button in the footer. Combine this strategy with any variant.

Incorrect Payment Information - Error
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Incorrect Payment Information - Error</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
  <div class="spectrum-Alert-footer">
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">Close</button>
  </div>
</div>

Alert - Error

Precursor
CSS Unverified

The error variant of Alert

Error Alert - Oh no
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Error Alert - Oh no</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Help

Precursor
CSS Unverified

The help variant of Alert

Infomation Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--help">
  <svg class="spectrum-Icon spectrum-UIIcon-HelpMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-HelpMedium" />
  </svg>
  <div class="spectrum-Alert-header">Infomation Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Info

Precursor
CSS Unverified

The info variant of Alert

Infomation Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Alert-header">Infomation Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Success

Precursor
CSS Unverified

The success variant of Alert

Successful Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--success">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessMedium" />
  </svg>
  <div class="spectrum-Alert-header">Successful Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Warning

Precursor
CSS Unverified

The warning variant of Alert

Warning Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--warning">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Warning Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Asset List

Beta Precursor
CSS Unverified

A selectable list of Assets, often used inside of Miller Columns.

  • Shantanu.jpg
  • Resource Allocation.csv
  • Frontend Projects
Show Markup
<ul class="spectrum-AssetList">
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
    <span class="spectrum-AssetList-itemLabel">Shantanu.jpg</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="FileCSV">
      <use xlink:href="#spectrum-icon-24-FileCSV"></use>
    </svg>
    <span class="spectrum-AssetList-itemLabel">Resource Allocation.csv</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
  <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-24-Folder"></use>
    </svg>
    <span class="spectrum-AssetList-itemLabel">Frontend Projects</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
</ul>

Avatar

Canon
CSS Verified

The small variant of Avatar

Avatar Disabled Avatar
Show Markup
<img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">

The Spectrum banner 'corner placement'

Most Popular
Includes Illustrator CC
Show Markup
<div style="width: 255px; height: 325px; background-color: #ccc; position: relative;">
  <div class="spectrum-Banner spectrum-Banner--info spectrum-Banner--corner">
    <div class="spectrum-Banner-header">Most Popular</div>
    <div class="spectrum-Banner-content">Includes Illustrator CC</div>
  </div>
</div>

The error variant of Banner

Purchase Soon
Trial expires in 2 days
Show Markup
<div class="spectrum-Banner spectrum-Banner--error">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Trial expires in 2 days</div>
</div>

The info variant of Banner

Most Popular
Includes Illustrator CC
Show Markup
<div class="spectrum-Banner spectrum-Banner--info">
  <div class="spectrum-Banner-header">Most Popular</div>
  <div class="spectrum-Banner-content">Includes Illustrator CC</div>
</div>

The warning variant of Banner

Purchase Soon
Your trial is about to expire
Show Markup
<div class="spectrum-Banner spectrum-Banner--warning">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Your trial is about to expire</div>
</div>

Bar Loader

Canon
CSS Unverified

Large variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Loading
50%
Show Markup
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

Bar Loader - Meter

Beta Precursor
CSS Unverified
Storage Space
50%
Storage Space
80%
Storage Space
90%
Show Markup
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-warning" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">80%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 80%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-critical" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">90%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 90%;"></div>
    </div>
  </div>
</div>

Bar Loader - Over Background

Canon
CSS Unverified

The Large Over Color variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Show Markup
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div>
    <div class="spectrum-BarLoader spectrum-BarLoader--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-BarLoader-label">Loading</div>
      <div class="spectrum-BarLoader-percentage">50%</div>
      <div class="spectrum-BarLoader-track">
        <div class="spectrum-BarLoader-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Bar Loader - Over Background Small

Canon
CSS Unverified

The small, over color variant of a Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Show Markup
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div>
    <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-BarLoader-label">Loading</div>
      <div class="spectrum-BarLoader-percentage">50%</div>
      <div class="spectrum-BarLoader-track">
        <div class="spectrum-BarLoader-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Bar Loader - Small

Canon
CSS Unverified

The small variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Loading
50%
Show Markup
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 50px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

The default variant of Breadcrumb

Show Markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Shoes</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nike</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Mens</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Summer 2016</a>
    </li>
  </ul>
</nav>

Used for the Title variant of a Breadcrumb

Show Markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--title">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Home</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Playground</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <h1 class="spectrum-Heading--pageTitle">
        <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Sliders</a>
      </h1>
    </li>
  </ul>
</nav>

Button - CTA

Canon
CSS Verified

Actions that require high visibility

Show Markup
<button class="spectrum-Button spectrum-Button--cta">
  <span class="spectrum-Button-label">Button</span>
</button>
<button class="spectrum-Button spectrum-Button--cta" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Over Background

Canon
CSS Verified

For any button used on top of a background

A Spectrum button that's meant to be placed over a non-standard color. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Show Markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Button - Primary

Canon
CSS Verified

For primary user actions



Button Button



Edit Edit
Show Markup
<button class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

<br><br>

<a role="button" href="#" class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</a>

<a role="button" class="spectrum-Button spectrum-Button--primary is-disabled">
  <span class="spectrum-Button-label">Button</span>
</a>

<br><br>

<button class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</button>

<br><br>

<a class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

<a class="spectrum-Button spectrum-Button--primary is-disabled">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

Button - Quiet Over Background

Canon
CSS Verified

For any quiet button used on top of a background

A Spectrum quiet button that's meant to be placed over a non-standard color. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Show Markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Button - Quiet Primary

Canon
CSS Verified

For primary user actions

Show Markup
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Quiet Secondary

Canon
CSS Verified

For secondary user actions

Show Markup
<button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Quiet Warning

Canon
CSS Verified

For destructive actions

Show Markup
<button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Secondary

Canon
CSS Verified

For secondary user actions

Show Markup
<button class="spectrum-Button spectrum-Button--secondary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--secondary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Warning

Canon
CSS Verified

For actions that are destructive

Show Markup
<button class="spectrum-Button spectrum-Button--warning">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--warning" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button Group

Canon
CSS Unverified

Group of buttons






Show Markup
<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br><br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-Tool">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
      <use xlink:href="#spectrum-icon-18-Brush" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>

Button Group (vertical)

Beta Precursor
CSS Unverified
Show Markup

<div style="display: flex; justify-content: space-between; width: 400px;">

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
        <use xlink:href="#spectrum-icon-18-Properties" />
      </svg>
      <span class="spectrum-ActionButton-label">Properties</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Info">
        <use xlink:href="#spectrum-icon-18-Info" />
      <span class="spectrum-ActionButton-label">Info</span>
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="ViewAllTags">
        <use xlink:href="#spectrum-icon-18-ViewAllTags" />
      <span class="spectrum-ActionButton-label">Keywords</span>
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-Tool">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
        <use xlink:href="#spectrum-icon-18-Brush" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>
  </div>

</div>

Calendar

Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date is-today">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Calendar - Disabled

Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth" disabled>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth" disabled>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" aria-readonly="true" aria-disabled="true">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="true" aria-invalid="false" title="Today, Wednesday, August 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled is-today">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Calendar - Focused

Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date is-today is-focused">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-focused">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-focused">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
  </div>
</div>

Calendar - Range Selection

Precursor
CSS Unverified

The default Calendar element

A calendar with a range selected. .is-selection-start goes on the first day in the selection, and .is-range-start goes on the first day of each week or month in the middle of a selection (but not the first day of the selection). .is-selection-end goes on the last day of the selection, and .is-range-end goes on the last day of each week or month in the middle of the selection (but not on the last day of the selection).

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-selection-start">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-today">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-range-end">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-range-start">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-selection-end">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell