Activity bar

a horizontal glass cluster of icon controls for a toolbar or header.

Example

<div class="lucent-activity-bar">
  <button type="button" class="lucent-nav-icon" aria-label="Search" title="Search">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">search</span>
    </span>
  </button>
  <button type="button" class="lucent-nav-icon is-active" aria-label="Alerts" title="Alerts" aria-current="page">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">notifications</span>
    </span>
  </button>
  <button type="button" class="lucent-nav-icon" aria-label="Help" title="Help">
    <span class="lucent-icon lucent-icon--lg" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">help</span>
    </span>
  </button>
</div>

Using it

Angular lucent-activity-bar
import { LucentActivityBar } from '@design-foundry/lucent-angular';
Stylesheet .lucent-activity-bar
@design-foundry/lucent-styles/core.css

Theming

Color (3)
Size & spacing (4)
Border & radius (1)
Shadow (1)