ActionBar

@/components/ui/ActionBar

Sidens primærhandling i en rad som kleber til bunnen av rulleområdet under 640px, og står i normal flyt fra 640px — for lange sider der primærknappen ellers havner under bretten på mobil.

Når brukes den

Lange sider (skjema, editorer, rapporter) der hovedhandlingen ellers ligger én til flere skjermhøyder ned på 375px (UX-strategi 11. sep 2026, mønster 3: én primær, over bretten).
Maks to knapper: én primær (til høyre), én sekundær (til venstre) — flere handlinger enn det hører hjemme i en OverflowMenu, ikke i denne raden.
`label` er en KORT statuslinje («3 av 5 felt fylt ut»), ikke en forklaring — bruk InlineNote til forklaringer.
Ikke bruk på korte sider der primærhandlingen allerede er synlig uten scroll — da er en vanlig Button i innholdet riktig, ActionBar løser et problem som ikke finnes der.
MÅ stå inne i dashbord-layoutens `<main className="app-scroll">` for at `sticky` skal ha noe å klebe til — se toppkommentaren i kildekoden for hvorfor den kleber over BottomNav og ikke bak den.

Eksempler

Primær + sekundær, med statuslinje

Vanligste bruk: Avbryt til venstre, Lagre til høyre, kort statustekst i midten.

Sideinnhold …

3 av 5 felt fylt ut

<ActionBar label="3 av 5 felt fylt ut">
  <Button variant="secondary" size="sm">Avbryt</Button>
  <Button variant="primary" size="sm">Lagre</Button>
</ActionBar>

Kun primær

`label` er valgfri — uten den er raden bare knappen(e), skjøvet til høyre.

<ActionBar>
  <Button variant="primary" size="sm">Send inn</Button>
</ActionBar>

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

children *

React.ReactNode

—

Knappene — maks to (primær + valgfri sekundær).

label

React.ReactNode

—

Kort statuslinje til venstre for knappene, f.eks. «3 av 5 fylt ut». Ikke en forklaring.

className

string

—

Ekstra klasser på raden.

Regler

regel/en-primaer-over-bretten

Beslektede komponenter

button

modal

overflow-menu