Panoramica
Passa il contenuto dell’icona tramite lo slot del nodoicon in minuscolo. Il riquadro deriva lo sfondo e il colore di primo piano ereditato dalla tavolozza del tema. Il contenuto dell’icona è decorativo. Mantieni un’etichetta visibile accanto a essa oppure assegna alla radice role="img" e un nome accessibile per un’immagine etichettata autonoma.
Utilizzo
Geometria e composizione native
Il riquadro è impostato per impostazione predefinita a 16px tramite il token di spaziatura e utilizza il token piccolo per border-radius. Imposta le dimensioni e il tratto dell’icona sul nodo stesso.style o className dell’elemento radice controllano larghezza, altezza, bordo, forma e colori del riquadro; gli stili espliciti sovrascrivono i valori predefiniti della tavolozza. La grafica personalizzata deve ereditare currentColor quando utilizza il colore di primo piano della tavolozza.
className, style e ref si applicano al div esterno. render sostituisce tale destinazione tramite la composizione Base UI, mantenendo il contenuto decorativo dell’icona. Assegna un nome al controllo circostante quando componi un riquadro in un’azione.
Sostituisci Icon={CompanyIcon} con icon={<CompanyIcon size={16} />}. Sposta le precedenti opzioni size e stroke nel nodo dell’icona e utilizza gli stili dell’elemento radice per dimensioni personalizzate del riquadro.
Props
string
CSS class applied to the tile root.
string | null
predefinito:"gray"
Theme palette name used to derive the background and foreground shades. Invalid names use the default theme color.
ReactNode
obbligatorio
Decorative icon content. The caller controls its dimensions and stroke.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the div root while preserving icon content and native props.
CSSProperties
Inline styles override tile geometry and palette defaults.