Actions

Every component, with its variants, sizes and states. Change the appearance here and every sample follows.

Button

One primary action per screen. Loading is disabled and busy, and says what it is doing.

Variants

Default

Primary

Danger

Ghost

Sizes

Regular

Small

Icon

Small icon

States

Enabled

Disabled

Focus

<button type="button" class="or-btn or-btn--primary">
  <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-save"></use></svg>
  Save changes
</button>
<button type="button" class="or-btn or-btn--icon or-btn--sm" aria-label="Notifications">
  <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-bell"></use></svg>
</button>
<!-- Loading: disabled and busy, the label says what is happening. -->
<button type="button" class="or-btn or-btn--primary" disabled aria-busy="true">
  <svg class="or-i or-i-16 or-spin" aria-hidden="true"><use href="#or-i-loader-circle"></use></svg>
  Saving…
</button>

<button type="button" className="or-btn or-btn--primary">
  <Icon name="save" size={16} />
  Save changes
</button>
<button type="button" className="or-btn or-btn--icon or-btn--sm" aria-label="Notifications">
  <Icon name="bell" size={16} />
</button>
{/* Loading: disabled and busy, the label says what is happening. */}
<button type="button" className="or-btn or-btn--primary" disabled aria-busy="true">
  <Icon name="loader-circle" size={16} className="or-spin" />
  Saving…
</button>

<button type="button" class="or-btn or-btn--primary">
  <Icon name="save" :size="16" />
  Save changes
</button>
<button type="button" class="or-btn or-btn--icon or-btn--sm" aria-label="Notifications">
  <Icon name="bell" :size="16" />
</button>
<!-- Loading: disabled and busy, the label says what is happening. -->
<button type="button" class="or-btn or-btn--primary" disabled aria-busy="true">
  <Icon name="loader-circle" :size="16" class="or-spin" />
  Saving…
</button>

<button type="button" className="or-btn or-btn--primary">
  <Icon name="save" size={16} />
  Save changes
</button>
<button type="button" className="or-btn or-btn--icon or-btn--sm" aria-label="Notifications">
  <Icon name="bell" size={16} />
</button>
{/* Loading: disabled and busy, the label says what is happening. */}
<button type="button" className="or-btn or-btn--primary" disabled aria-busy="true">
  <Icon name="loader-circle" size={16} className="or-spin" />
  Saving…
</button>

<button type="button" class="or-btn or-btn--primary">
  <Icon name="save" :size="16" />
  Save changes
</button>
<button type="button" class="or-btn or-btn--icon or-btn--sm" aria-label="Notifications">
  <Icon name="bell" :size="16" />
</button>
<!-- Loading: disabled and busy, the label says what is happening. -->
<button type="button" class="or-btn or-btn--primary" disabled aria-busy="true">
  <Icon name="loader-circle" :size="16" class="or-spin" />
  Saving…
</button>

Segmented control

Three or four choices that apply at once, shown side by side.

States

Selected

Focus

<div class="or-seg" role="group" aria-label="Theme">
  <button type="button" aria-pressed="true">Light</button>
  <button type="button" aria-pressed="false">Ink</button>
  <button type="button" aria-pressed="false">Charcoal</button>
</div>

<Seg
  label={t('settings.theme.label')}
  value={theme}
  options={THEMES.map((value) => ({ value, label: t(`settings.theme.${value}`) }))}
  onChange={setTheme}
/>

<Seg
  :label="t('settings.theme.label')"
  :model-value="preferences.theme"
  :options="THEMES.map((value) => ({ value, label: t(`settings.theme.${value}`) }))"
  @update:model-value="preferences.setTheme"
/>

<Seg
  label={t('settings.theme.label')}
  value={theme}
  options={THEMES.map((value) => ({ value, label: t(`settings.theme.${value}`) }))}
  onChange={setTheme}
/>

<Seg
  :label="t('settings.theme.label')"
  :model-value="preferences.theme"
  :options="THEMES.map((value) => ({ value, label: t(`settings.theme.${value}`) }))"
  @update:model-value="preferences.setTheme"
/>

A list of actions behind a button. Escape and a click outside close it.

States

Closed

Open

<div class="or-menu" data-or-menu>
  <button type="button" class="or-btn or-btn--ghost" aria-haspopup="true" aria-expanded="false">Account</button>
  <div class="or-menu__panel" hidden>
    <a class="or-menu__item" href="profile.html">Profile</a>
    <div class="or-menu__sep" role="separator"></div>
    <button type="button" class="or-menu__item">Sign out</button>
  </div>
</div>

<Menu
  trigger={({ open, toggle }) => (
    <button type="button" className="or-btn or-btn--ghost" aria-haspopup="true" aria-expanded={open} onClick={toggle}>
      Account
    </button>
  )}
>
  <Link className="or-menu__item" to="/profile">Profile</Link>
  <div className="or-menu__sep" role="separator" />
  <button type="button" className="or-menu__item" onClick={signOut}>Sign out</button>
</Menu>

<Menu>
  <template #trigger="{ open, toggle }">
    <button type="button" class="or-btn or-btn--ghost" aria-haspopup="true" :aria-expanded="open" @click="toggle">
      Account
    </button>
  </template>
  <RouterLink class="or-menu__item" to="/profile">Profile</RouterLink>
  <div class="or-menu__sep" role="separator" />
  <button type="button" class="or-menu__item" @click="signOut">Sign out</button>
</Menu>

<Menu
  trigger={({ open, toggle }) => (
    <button type="button" className="or-btn or-btn--ghost" aria-haspopup="true" aria-expanded={open} onClick={toggle}>
      Account
    </button>
  )}
>
  <Link className="or-menu__item" href="/profile">Profile</Link>
  <div className="or-menu__sep" role="separator" />
  <button type="button" className="or-menu__item" onClick={signOut}>Sign out</button>
</Menu>

<Menu>
  <template #trigger="{ open, toggle }">
    <button type="button" class="or-btn or-btn--ghost" aria-haspopup="true" :aria-expanded="open" @click="toggle">
      Account
    </button>
  </template>
  <NuxtLinkLocale class="or-menu__item" to="/profile">Profile</NuxtLinkLocale>
  <div class="or-menu__sep" role="separator" />
  <button type="button" class="or-menu__item" @click="signOut">Sign out</button>
</Menu>

Filter chip

Opens the values of one column. The count says how many are chosen.

Used in the demo at /orders

States

Closed

With a count

Open

Focus

<button type="button" class="or-chip" aria-haspopup="true" aria-expanded="false" aria-label="Filter by Status">
  <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-filter"></use></svg>
  Status
  <span class="or-chip__count">2</span>
  <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-chevron-down"></use></svg>
</button>

<FilterMenu
  field="status"
  label={t('table.status')}
  values={ORDER_STATUSES}
  query={table.query}
  onToggle={table.filter}
  labelOf={(value) => format.label('orderStatus', value)}
/>

<FilterMenu
  field="status"
  :label="t('table.status')"
  :values="ORDER_STATUSES"
  :query="table.query.value"
  :label-of="(value) => format.label('orderStatus', value)"
  @toggle="table.filter"
/>

{/* A filter is a URL: each option is a link to the list with it toggled. */}
<FilterMenu path={path} query={query} keep={keep} field="status" label={t('table.status')} values={filterValues('orderStatus')} />

<TableFilterMenu
  field="status"
  :label="t('table.status')"
  :values="ORDER_STATUSES"
  :query="table.query.value"
  :label-of="(value) => format.label('orderStatus', value)"
  @toggle="table.filter"
/>