IconTile

@/components/ui/IconTile

Avrundet flate med tonet bakgrunn og farget ikon — bakgrunn og ikonfarge settes SAMMEN av tonen, aldri hver for seg.

Når brukes den

Bruk foran en rad eller et kort som bærer en STATUS — bakgrunn og ikonfarge følger samme tone.
Er ikonet rent dekorativt uten tone-betydning, hold et vanlig ikon alene i stedet.
Størrelsen følger konteksten: lg (40px) i kort/dashbord-rader, md (32px) i tettere lister, sm (20px) i metadata.

Toner

Tonen setter bakgrunn (tonens -light) og ikonfarge (tonens -text) sammen — velg tonen som svarer til statusen.

accent

success

warning

danger

neutral

<IconTile icon={Skjold} tone="success" size="lg" />

Størrelser

lg for kort/dashbord, md for tettere lister, sm for metadata og tett tekst.

size="sm"

size="md"

size="lg"

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

icon *

IconComponent

—

Ikonet som vises i flisen.

tone

'accent' | 'success' | 'warning' | 'danger' | 'neutral'

'accent'

Setter bakgrunn og ikonfarge sammen.

size

'sm' | 'md' | 'lg'

'lg'

20 / 32 / 40px, med tilhørende ikon- og radiusstørrelse.

className

string

—

Ekstra klasser.

style

CSSProperties

—

Ekstra inline-stil.