Components

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

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

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

{/* 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')} />

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

<span className="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 className="or-avatar or-avatar--sky or-avatar--lg">LV</span>

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

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

// Server actions answer in place: the island shows the result inline
// rather than in a toast, so it is still there after a redirect.
<p className="or-alert or-alert--success" role="status">{t('form.saved')}</p>

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

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

<FormBar
  dirty={form.dirty}
  saving={save.isPending}
  errors={form.errorCount}
  onSave={() => form.submit(() => save.mutate())}
  onDiscard={form.discard}
/>

<ConfirmDialog
  open={guard.pending !== null}
  title={t('form.unsaved')}
  body={t('form.unsavedBody')}
  confirmLabel={t('form.leave')}
  onConfirm={guard.leave}
  onCancel={guard.stay}
/>

<Field label={t('settings.general.organisation')} error={form.errors.organisation}>
  {({ id, describedBy, invalid }) => (
    <TextInput
      id={id}
      describedBy={describedBy}
      invalid={invalid}
      field="organisation"
      value={form.values.organisation}
      onChange={(value) => form.set('organisation', value)}
      onBlur={() => form.blur('organisation')}
    />
  )}
</Field>

<Field label={t('table.status')} error={form.errors.status}>
  {({ id, describedBy, invalid }) => (
    <SelectInput id={id} describedBy={describedBy} invalid={invalid} field="status" value={form.values.status} options={STATUS_OPTIONS} onChange={(value) => form.set('status', value)} />
  )}
</Field>

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

{/* Selection is client state; the rows around it are server-rendered. */}
<HeaderCheck label={t('table.selectPage')} />
<RowCheck id={order.id} label={t('table.selectRow', { label: order.number })} />

<SwitchField
  field="productUpdates"
  label={t('settings.notifications.productUpdates')}
  checked={form.values.productUpdates}
  onChange={(value) => form.set('productUpdates', value)}
/>

<Combobox
  id={id}
  describedBy={describedBy}
  field="tags"
  invalid={invalid}
  values={form.values.tags}
  options={options('tag')}
  onChange={(values) => form.set('tags', values)}
/>

<DateField
  id={id}
  describedBy={describedBy}
  field="publishAt"
  value={form.values.publishAt}
  today={TODAY}
  onChange={(value) => form.set('publishAt', value)}
/>

<FileField
  id={id}
  describedBy={describedBy}
  field="images"
  files={form.values.images}
  onChange={(files) => form.set('images', files)}
  onReject={(failure) => push(t(failure.key, failure.values), 'danger')}
/>

<RichText
  id={id}
  describedBy={describedBy}
  label={t('product.descriptionIn', { language: t(`language.${locale}`) })}
  value={form.values.description[locale]}
  onChange={(html) => form.set(`description.${locale}`, html)}
/>

<CodeInput code={code} legend={t('auth.verify.legend')} error={form.errors.code} onChange={setCode} />

<StrengthMeter password={form.values.password} />

<div className="or-tabs" role="tablist" aria-label={t('settings.title')} onKeyDown={onKeyDown}>
  {SETTINGS_TABS.map((name) => (
    <Link key={name} className="or-tabs__tab" role="tab" href={`/settings?tab=${name}`}
      aria-selected={name === tab} tabIndex={name === tab ? 0 : -1}>
      {t(`settings.tabs.${name}`)}
    </Link>
  ))}
</div>

{/* Links rather than buttons: every page is a URL the server renders. */}
<Link className="or-pager__page" href={hrefFor(path, query, { page: page + 1 }, keep)} aria-label={t('table.nextPage')}>
  <Icon name="chevron-right" size={16} />
</Link>

{/* The selection is client state; the action is a server action. */}
<BulkBar>
  <BulkActions />
</BulkBar>

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

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

{/* Sorting is a link to the same list, sorted: the server renders it. */}
<th scope="col" aria-sort={sort} className="or-num">
  <Link className="or-table__sort" href={hrefFor(path, nextSort(query, 'totalCents'), {}, keep)}>
    {t('table.total')}
    <Icon name={ARROW[sort]} size={16} />
  </Link>
</th>

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

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