AdminSettingsPanel

Usage

Wrap a settings form in children and put the Save/Reset/Cancel controls in the footer slot — they render right-aligned in a bordered bar; push left-only content (errors, "Saved." flashes) with className="mr-auto" on the first left item. One concern per panel — a settings page composes several.

import { AdminSettingsPanel, Button, FormFieldError } from '@epasslive/design-system'

<AdminSettingsPanel
  title={locale === 'fr' ? 'Taxes et expédition' : 'Tax & Shipping'}
  description={locale === 'fr'
    ? 'Configuration des taux de taxe et des frais d\'expédition par province.'
    : 'Tax rates and shipping costs configuration by province.'}
  locale={locale}
  footer={
    <>
      {form.error && <FormFieldError message={form.error} className="mr-auto" />}
      <Button variant="secondary" onClick={form.reset} disabled={form.saving}>
        {locale === 'fr' ? 'Réinitialiser' : 'Reset'}
      </Button>
      <Button onClick={form.save} disabled={form.saving}>
        {locale === 'fr' ? 'Enregistrer' : 'Save'}
      </Button>
    </>
  }
>
  <TaxTabs form={form} locale={locale} />
</AdminSettingsPanel>

Conventions

locale is required but currently unused in render — pass your active locale so future translated chrome lights up without a breaking change. Mirror the TaxConfigForm shape: destructive Reset before primary Save, both disabled while saving, and announced errors via FormFieldError (pushed left with mr-auto).

Accessibility

The section is named by its heading via aria-labelledby (WCAG 1.3.1 / 4.1.2 — the h2 id is derived from id). The footer is a structural <footer> element within the section; action semantics (disabled states, live error text) come from the slot content — compose FormFieldError for announced validation messages.

Props