Components

<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>

<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"
/>

<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>

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

<span class="or-badge or-badge--success">
  <span class="or-badge__dot"></span>
  Paid
</span>

<span class="or-delta or-delta--up">
  <Icon name="trending-up" :size="16" />
  +12.4%
</span>

<!-- Initials, never a photograph: a face is a licence problem and a request. -->
<span class="or-avatar or-avatar--sky or-avatar--lg">LV</span>

<span class="or-tag">
  Gifts
  <button type="button" aria-label="Remove Gifts">
    <Icon name="x" :size="16" />
  </button>
</span>

<div class="or-alert or-alert--warning" role="status">
  <Icon name="triangle-alert" :size="18" />
  <div>Three products are out of stock.</div>
</div>

const toasts = useToasts()
toasts.push(t('form.saved'), 'success')

<Skeleton variant="value" />
<Skeleton width="40%" />

<EmptyState icon="search" :title="t('table.noResults')" :body="t('table.noResultsBody')">
  <button type="button" class="or-btn" @click="table.clearFilters">{{ t('table.clearFilters') }}</button>
</EmptyState>

<FormBar
  :dirty="form.dirty.value"
  :saving="save.isPending.value"
  :errors="form.errorCount.value"
  @save="form.submit(() => save.mutate())"
  @discard="form.discard()"
/>

<FormConfirmDialog
  :open="guard.pending.value !== null"
  :title="t('form.unsaved')"
  :body="t('form.unsavedBody')"
  :confirm-label="t('form.leave')"
  @confirm="guard.leave"
  @cancel="guard.stay"
/>

<FormField v-slot="slot" :label="t('settings.general.organisation')" :error="form.errors.value.organisation">
  <FormTextInput
    v-bind="slot"
    field="organisation"
    :model-value="form.values.value.organisation"
    @update:model-value="form.set('organisation', $event)"
    @blur="form.blur('organisation')"
  />
</FormField>

<FormField v-slot="slot" :label="t('table.status')" :error="form.errors.value.status">
  <FormSelectInput v-bind="slot" field="status" :model-value="form.values.value.status" :options="STATUS_OPTIONS" @update:model-value="form.set('status', $event)" />
</FormField>

<textarea class="or-textarea" rows="4" id="bio" aria-describedby="bio-hint"></textarea>
<p class="or-hint" id="bio-hint">280 characters left</p>

<TableCheck
  :checked="selection.selected.value.has(order.id)"
  :label="t('table.selectRow', { label: order.number })"
  @change="selection.toggle(order.id)"
/>

<FormSwitchField
  field="productUpdates"
  :label="t('settings.notifications.productUpdates')"
  :model-value="form.values.value.productUpdates"
  @update:model-value="form.set('productUpdates', $event)"
/>

<FormCombobox
  v-bind="slot"
  field="tags"
  :model-value="form.values.value.tags"
  :options="options('tag')"
  @update:model-value="form.set('tags', $event)"
/>

<FormDateField
  v-bind="slot"
  field="publishAt"
  :model-value="form.values.value.publishAt"
  :today="TODAY"
  @update:model-value="form.set('publishAt', $event)"
/>

<FormFileField
  v-bind="slot"
  field="images"
  :model-value="form.values.value.images"
  @update:model-value="form.set('images', $event)"
  @reject="(failure) => toasts.push(t(failure.key, failure.values), 'danger')"
/>

<FormRichText
  v-bind="slot"
  :label="t('product.descriptionIn', { language: t(`language.${locale}`) })"
  :model-value="form.values.value.description[locale]"
  @update:model-value="form.set(`description.${locale}`, $event)"
/>

<AuthCodeInput :code="code" :legend="t('auth.verify.legend')" :error="errors.code" @update:code="onCode" />

<AuthStrengthMeter :password="values.password" />

<div class="or-tabs" role="tablist" :aria-label="t('settings.title')" @keydown="onKeyDown">
  <NuxtLink v-for="name in SETTINGS_TABS" :key="name" class="or-tabs__tab" role="tab"
    :to="{ path: localePath('/settings'), query: { tab: name } }" :aria-selected="name === tab" :tabindex="name === tab ? 0 : -1">
    {{ t(`settings.tabs.${name}`) }}
  </NuxtLink>
</div>

<TablePager :page="orders.data.value" @page="(page) => table.patch({ page })" @per-page="(perPage) => table.patch({ perPage })" />

<TableBulkBar :count="selection.selected.value.size" @clear="selection.clear">
  <button type="button" class="or-btn or-btn--sm" @click="bulk.mutate({ status: 'shipped', fulfilment: 'fulfilled' })">{{ t('orders.bulkMarkShipped') }}</button>
</TableBulkBar>

<section class="or-card">
  <div class="or-card__head">
    <h3>Recent orders</h3>
    <a class="or-btn or-btn--ghost or-btn--sm" href="orders.html">View all</a>
  </div>
  <div class="or-card__body">…</div>
  <!-- or-card__body--flush when the body is a table that runs to the edges -->
</section>

<div class="or-card">
  <div class="or-stat">
    <span class="or-stat__label">Revenue</span>
    <span class="or-stat__value">€48,290.00</span>
    <span class="or-stat__foot"><span class="or-delta or-delta--up">+12.4%</span></span>
  </div>
</div>

<TableSelectAll :rows="rows" :selected="selection.selected.value" @toggle="selection.toggleAll(rows)" />
<TableSortHeader field="totalCents" :label="t('table.total')" :query="table.query.value" numeric @sort="table.sortBy" />

<ol class="or-timeline">
  <li class="or-timeline__item">
    <span class="or-timeline__mark" aria-hidden="true">
      <Icon name="shopping-cart" :size="16" />
    </span>
    <div class="or-timeline__body">
      <span>Placed order #10482</span>
      <span class="or-timeline__when">18 Feb 2026, 10:24</span>
    </div>
  </li>
</ol>

<dl class="or-facts">
  <div class="or-facts__row">
    <dt>Email</dt>
    <dd><a href="mailto:maya@example.com">maya@example.com</a></dd>
  </div>
</dl>