Primary Secondary

Semantic colors

color	background
--on-background	--background

Specialty colors

color	background
--on-background	--background

Example Controls

Buttons

With Icons

Large Button Styles

Icons

menu link link_off

Large Icons

menu link link_off

Full List

Select

  <select-sk>
    <div>select</div>
    <div>any</div>
    <div selected>one</div>
  </select-sk>

select

any

one

  <multi-select-sk>
    <div>select</div>
    <div selected>any</div>
    <div>ones</div>
    <div>you</div>
    <div selected>like</div>
  </multi-select-sk>

select

any

ones

you

Details/Summary

Summary appears as button

Details
appear
here

  <details class="expando">
    <summary id="options-open">
      <span>Summary with class `expando`</span><expand-less-icon-sk></expand-less-icon-sk
      ><expand-more-icon-sk></expand-more-icon-sk>
    </summary>
    <ul>
      <li>Details</li>
      <li>appear</li>
      <li>here</li>
    </ul>
  </details>

Summary with class `expando`

Details
appear
here

Calendar

<calendar-input-sk></calendar-input-sk>

Check/Radio Buttons

    <checkbox-sk label="Unchecked"          ></checkbox-sk>
    <checkbox-sk label="Checked"            checked></checkbox-sk>
    <checkbox-sk label="Disabled Checked"   disabled checked></checkbox-sk>
    <checkbox-sk label="Disabled Unchecked" disabled></checkbox-sk>

    <radiogroup>
      <radio-sk          label="Unchecked"></radio-sk>
      <radio-sk checked  label="Checked"></radio-sk>
      <radio-sk disabled label="Disabled Unchecked"></radio-sk>
    </radiogroup>

tabs-sk and tabs-panel-sk

    <tabs-sk>
      <button class=selected>Query</button>
      <button>Results</button>
      <button>Details</button>
    </tabs-sk>
    <tabs-panel-sk>
      <div>
        This is the query tab.
      </div>
      <div>
        This is the results tab.
      </div>
      <div>
        This is the details tab.
      </div>
    </tabs-panel-sk>

This is the query tab.

This is the results tab.

This is the details tab.

spinner-sk

Scrollbars

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis nisi nec velit rhoncus ultrices et ac augue. Morbi malesuada augue at est imperdiet luctus. Pellentesque condimentum mi eget lorem luctus facilisis. Mauris vitae tempor dolor, eu finibus orci. Etiam risus justo, mollis eu neque ut, suscipit vehicula sapien. Integer convallis, sem non lobortis congue, risus lacus sodales massa, vitae dignissim odio arcu a mi. Nulla accumsan dolor id congue pharetra.

Nunc mattis consequat faucibus. Aliquam ut leo lorem. Morbi dignissim sem id sem dapibus, nec mattis sem congue. Nunc sodales scelerisque enim, at consectetur nisi tincidunt ut. Sed tempus orci et nulla pellentesque efficitur. Ut sollicitudin finibus est et accumsan. Vestibulum elit justo, interdum nec nisl id, eleifend egestas augue. Curabitur blandit nisl est, consectetur pellentesque orci finibus at. Cras porta leo mi, vel iaculis quam finibus eget. Etiam rutrum tempus ullamcorper. Maecenas mattis, enim ac gravida ullamcorper, purus purus varius mauris, eget tempor turpis ante nec leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Tables

Fruit	Color
Apple	Red
Grape	Green

Nav Buttons

  <nav-button-sk></nav-button-sk>
  <nav-links-sk closed>
    <a href="">Main</a>
    <a href="">Triage</a>
    <a href="">Alerts</a>
  </nav-links-sk>

Main Triage Alerts

toast-sk

This will disappear in 5s (the default), unless you click the Close button.

error-toast-sk

<error-toast-sk></error-toast-sk>

theme-chooser-sk