Design

Callout

@/components/ui/Callout

Visuelt skille for «dette hører til her, men er ikke selve steget/raden» — et strukturelt skille eller en tips-/varselboks, med valgfri label, ikon og én CTA.

Når brukes den

  • default for et strukturelt, nøytralt skille (gjennomsiktig gray-alpha-flate — blender inn i enhver bakgrunn).

  • secondary for en nøytral notisboks med samme visuelle VEKT som de fargede tonene, men uten fargebetydning (en solid gray-boks).

  • accent/success/warning/error for en tips-/varselboks (info, bekreftelse, forbehold, feil).

  • fill={false} for en lettere variant: vanlig kort-materiale + fargelagt kant/ikon/label, uten en farget flate.

  • label for en kort (1–2 ord) tittellinje, action for ÉN CTA under innholdet.

  • icon når det gjør tonen raskere å skanne — f.eks. et juridisk forbehold eller en advarsel. icon={null} skjuler den eksplisitt.

  • Bruk role="alert" når boksen erstatter en tidligere feilmelding som skal annonseres for skjermleser.

  • Ikke rull en ny kant/boks for tips eller varsler et annet sted i koden — bruk denne.

Eksempler

Toner (fylt, standard)

default/secondary er nøytrale (hhv. gjennomsiktig og solid); de fire andre er fargede tips-/varselbokser.

default

secondary

accent

success

warning

error

<Callout tone="warning">
  <Text variant="copy-13">Standardmalen må tilpasses og vedtas på årsmøtet.</Text>
</Callout>

Uten fyll (fill=false)

Vanlig kort-materiale (--color-surface) + fargelagt kant og ikon — for et notis som skal skille seg ved GRUNN, ikke ved en farget flate.

Standardmalen er et utkast som må tilpasses og vedtas på årsmøtet.

<Callout tone="accent" fill={false} icon={Info}>
  <Text variant="copy-13" tone="secondary">…</Text>
</Callout>

Med label og action

label er en kort (1–2 ord) tittellinje i tonens farge; action er ÉN CTA under innholdet.

Uvedtatt

Denne malen er et utkast og gjelder ikke før den er vedtatt.

<Callout tone="warning" icon={Info} label="Uvedtatt" action={<Button variant="secondary" size="sm">Send til årsmøtet</Button>}>
  <Text variant="copy-13">Denne malen er et utkast og gjelder ikke før den er vedtatt.</Text>
</Callout>

Størrelser

«medium» (standard for default/secondary) er den store, luftige varianten; «small» (standard for de fargede tonene) er den tettere notisboksen. Begge kan settes eksplisitt på enhver tone.

small

medium

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
children *
ReactNode
—
Innholdet — typografi og farge på teksten selv er uendret, kallstedet styrer den.
tone
'default' | 'secondary' | 'success' | 'warning' | 'error' | 'accent'
'default'
Fargetema for flate, kant og ikon/label.
fill
boolean
true
true: farget flate (tone-light). false: vanlig kort-flate + fargelagt kant/ikon.
size
'small' | 'medium'
—
Standard følger tonen (default/secondary→medium, andre→small) — sett eksplisitt for å overstyre.
icon
IconComponent | null
—
Ledende ikon i venstre kant, farget etter tonen. null skjuler den eksplisitt.
label
ReactNode
—
Kort tittellinje (1–2 ord) i tonens farge, over innholdet.
action
ReactNode
—
ÉN CTA (typisk en liten Button), vist under innholdet.
className
string
—
Ekstra klasser.
style
CSSProperties
—
Ekstra inline-stil.
role
string
—
F.eks. "alert" når boksen erstatter en tidligere håndrullet feilmelding som skal annonseres for skjermleser.

Regler

regel/migrasjon-uten-sjargong-til-kunde

Beslektede komponenter

inline-note
form-error
badge