Vai al contenuto principale

Panoramica

LightIconButton compone IconButton con una superficie ghost e dimensioni ridotte. Fornisci un nome accessibile e contenuto dell’icona decorativo.

Utilizzo

L’enfasi standard utilizza testo neutro secondario; l’enfasi discreta utilizza testo terziario. L’aspetto esplicito dell’elemento figlio ha la precedenza sui valori di ButtonGroup, seguito dai valori predefiniti del componente. I colori semantici mantengono il proprio trattamento del contrasto. I controlli piccoli sono di 24px con un’icona di 14px; i controlli medi sono di 32px con un’icona di 16px. I controlli compatti utilizzano size="xs" e sono di 20px.

Opzioni visive

Confronta l’enfasi nelle dimensioni piccola e media, inclusi gli stati selezionato, di caricamento e disabilitato.

Stato e interazione

Il pulsante gestisce l’attivazione tramite tastiera, il comportamento disabilitato e di caricamento, i ref, gli attributi nativi e la composizione del rendering. Il valore predefinito nativo è type="button". Utilizza aria-pressed per gli interruttori e aria-expanded per le divulgazioni. L’applicazione gestisce questi stati e può impostare color="accent" per evidenziare un’azione selezionata. Lo stato attivo da tastiera utilizza l’anello di focus condiviso. Il testo del tooltip è facoltativo e non sostituisce un nome accessibile da aria-label o aria-labelledby. Imposta href per un link. Per il routing gestito dall’applicazione, fornisci render, nativeButton={false} e role="link".

Aggiornamento dei controlli esistenti

Importa LightIconButton da twenty-ui/components. Sostituisci Icon={IconPlus} con i figli <IconPlus />, small/medium con sm/md, accent="tertiary" con emphasis="subtle" e testId con data-testid. Sostituisci i flag sintetici active e focus con lo stato semantico e l’effettivo focus da tastiera. Sostituisci LightIconButtonGroup con ButtonGroup utilizzando attached={false} e figli espliciti. Imposta disabled sulle azioni non disponibili, incluse le azioni senza un gestore di clic. I wrapper e gli attivatori di tooltip possono rimanere attorno a ciascun figlio.

Azioni della riga

Usa un ListItem passivo con uno slot actions per controlli indipendenti. Passa direttamente un LightIconButton oppure utilizza ButtonGroup per più pulsanti. Ogni pulsante dispone del proprio nome accessibile, gestore di clic e stato disabilitato. Avvolgi gli attivatori dei menu a discesa direttamente attorno al pulsante.
Un pulsante senza un gestore onClick può rimanere abilitato quando un menu a discesa circostante gestisce la sua interazione. Imposta esplicitamente disabled per i pulsanti non disponibili. Mantieni i controlli indipendenti accanto a un ListItemButton azionabile affinché ciascuno mantenga il proprio stato attivo e attivazione.

Props

string
Accessible name describing the action. Required unless aria-labelledby supplies the name.
string
ID of the element supplying the accessible name. Can be used instead of aria-label.
ReactNode
obbligatorio
Icon content. Decorative and hidden from assistive technology.
string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that returns a class based on the component’s state.
"accent" | "danger" | "inherit" | "neutral" | "success"
Semantic color of the button. inherit uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.
boolean
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
"standard" | "subtle"
predefinito:"standard"
Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.
boolean
predefinito:"false"
Whether the button should be focusable when disabled.
string
Destination URL. Renders a native anchor when render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.
boolean
Shows a loading indicator and disables activation.
boolean
predefinito:"true"
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in href anchor defaults to false; an explicit value takes precedence.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use nativeButton={false} and role="link" for a custom navigation anchor. Router integration belongs to the caller.
AriaRole
Role of the root element. Use link for custom navigation renderers.
"round" | "square"
Square or round icon control.
"md" | "sm" | "xs"
predefinito:"sm"
Button size: xs (20px), sm (24px), or md (32px).
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that returns a style object based on the component’s state.
string
Text displayed when hovering or focusing the button.
number
Delay before showing the tooltip.
number
Distance in pixels between the button and the tooltip.
"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"
Preferred placement of the tooltip relative to the button.
"ghost" | "link" | "outline" | "soft" | "solid"
predefinito:"ghost"
Visual treatment of the button surface. link uses compact text styling without a filled surface or border; render composition determines native semantics.