IconButton

Panoramica

IconButton combina Button con una superficie quadrata o rotonda. Passa l’icona come elemento figlio e fornisci un nome accessibile con aria-label o aria-labelledby. Il contenuto dell’icona è decorativo e nascosto alle tecnologie assistive.

Utilizzo

import { IconButton } from 'twenty-ui/components/input';
import { IconSearch } from 'twenty-ui/icon';

export const SearchButton = () => (
  <IconButton aria-label="Search">
    <IconSearch />
  </IconButton>
);

Le dimensioni sono xs (20px), sm (24px) e md (32px). I valori predefiniti sono md, outline e neutral. Varianti e colori corrispondono a Button. Usa shape="round" per un pulsante circolare; la forma predefinita è square.

Opzioni visive

Confronta una scelta visiva alla volta. Usa gli esempi con tooltip denominato, elevato e raggruppato per la composizione.

Nomi accessibili

Usa aria-label per un nome fornito direttamente nel controllo. Quando il testo visibile denomina già l’azione, usa invece aria-labelledby per farvi riferimento. È richiesta almeno una prop per il nome.

import { IconButton } from 'twenty-ui/components/input';
import { IconSearch } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const LabelledSearchButton = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <Text render={<span />} id="records-search-label">
      Search records
    </Text>
    <IconButton aria-labelledby="records-search-label" tooltip="Find a record">
      <IconSearch />
    </IconButton>
  </Text>
);

Aggiungi tooltip per mostrare testo al passaggio del mouse e quando il focus è sulla tastiera. Mantieni aria-label o aria-labelledby come nome accessibile dell’azione. I pulsanti disabilitati e in caricamento mantengono i tooltip al passaggio del mouse.

import { IconButton } from 'twenty-ui/components/input';
import { IconSearch } from 'twenty-ui/icon';

export const SearchRecordsButton = () => (
  <IconButton aria-label="Search" tooltip="Search records">
    <IconSearch />
  </IconButton>
);

Per impostazione predefinita, il tooltip viene visualizzato in basso, con un ritardo di 1000 ms e uno scostamento di 5 px. Usa tooltipPlace, tooltipDelay e tooltipOffset per modificarlo. Omettendo tooltip, il pulsante viene visualizzato direttamente.

Proprietà dello stato

L’applicazione fornisce loading e disabled. Entrambi impediscono l’attivazione. Lo stato di caricamento mantiene le dimensioni quadrate e l’etichetta accessibile. Il pulsante non tiene traccia di un valore selezionato né imposta automaticamente lo stato di caricamento dopo un clic. Il focus nativo da tastiera segue il browser; usa aria-pressed quando l’applicazione gestisce uno stato di attivazione/disattivazione.

Azioni elevate

Usa elevated per aggiungere un’ombra e la sfocatura dello sfondo. Anche il pulsante con contorno neutro predefinito ottiene una superficie con bordo, con colori corrispondenti per l’icona e l’interazione. Le altre varianti e i colori semantici mantengono la palette esistente. elevated è impostato su false per impostazione predefinita. Non modifica il posizionamento, la visibilità o le dimensioni. Per impostazione predefinita, la dimensione rimane md (32px); imposta size="sm" per un controllo da 24px.

import { IconButton } from 'twenty-ui/components/input';
import { IconPlus } from 'twenty-ui/icon';

export const AddWidgetButton = () => (
  <IconButton elevated size="sm" aria-label="Add widget">
    <IconPlus />
  </IconButton>
);

Ometti elevated o impostalo su false per ripristinare l’aspetto standard. I pulsanti con rilievo supportano gli stessi tooltip, stati di caricamento, link e interazioni da tastiera. Sostituisci i controlli FloatingIconButton esistenti con IconButton elevated. Passa l’icona come children, usa aria-label nativo e mappa small a sm e medium a md. Fornisci size="sm" quando il controllo precedente utilizzava la dimensione predefinita. Il focus nativo e aria-pressed sostituiscono il focus sintetico e i flag attivi. FloatingIconButtonGroup è stato rimosso. Combina ButtonGroup con IconButton per le azioni raggruppate e mantieni nel layout qualsiasi superficie fluttuante condivisa.

Azioni raggruppate

import { ButtonGroup } from 'twenty-ui/primitives/input';
import { IconButton } from 'twenty-ui/components/input';
import { IconPlus, IconSearch } from 'twenty-ui/icon';

export const RecordActions = () => (
  <ButtonGroup
    aria-label="Record actions"
    size="sm"
    variant="solid"
    color="accent"
  >
    <IconButton
      aria-label="Search records"
      tooltip="Search records"
      variant="outline"
      color="neutral"
    >
      <IconSearch />
    </IconButton>
    <IconButton aria-label="Create record" tooltip="Create record">
      <IconPlus />
    </IconButton>
  </ButtonGroup>
);

ButtonGroup fornisce valori predefiniti per dimensione, variante e colore, oltre ad angoli contigui. Le prop esplicite degli elementi figlio hanno la precedenza in modo indipendente, incluso size="xs". I singoli pulsanti non necessitano di una prop di posizione. Mantieni i pulsanti collegati della stessa dimensione affinché i loro bordi siano allineati. Imposta la dimensione sul gruppo e lascia che ogni pulsante la erediti.

Link e moduli

Senza un render personalizzato, href esegue il rendering di un’ancora, a meno che nativeButton non sia esplicitamente true. Per un’ancora di navigazione personalizzata o un collegamento del router, imposta nativeButton={false} e role="link". Il renderer può gestire la propria destinazione senza un href di IconButton. Mantieni nativeButton su true per un pulsante nativo personalizzato e usa false per un elemento azione non nativo. Le prop esplicite nativeButton e role vengono mantenute. I collegamenti disabilitati e in caricamento non possono essere attivati. Il routing rimane nell’applicazione. Gli attributi del pulsante nativo e dell’ancora, i gestori di eventi, i dettagli degli eventi, i ref e la composizione del render vengono passati a Button. Il ref riceve l’effettivo elemento radice. La composizione del tooltip mantiene quella radice e il relativo nome accessibile. Il valore predefinito è type="button"; imposta esplicitamente type="submit" per l’invio del modulo.

Controlli compatti e rotondi

Usa size="xs" per un controllo da 20px e shape="round" per angoli circolari. I controlli RoundedIconButton esistenti diventano IconButton con shape="round", variant="solid" e color="accent". Mappa la precedente dimensione small a xs e la dimensione medium a sm. Fornisci elementi figlio icona e un nome accessibile.

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"

predefinito:"neutral"

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.

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 (false for the built-in href anchor)"

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"

predefinito:"square"

Square or round icon control.

"md" | "sm" | "xs"

predefinito:"md"

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.

Text displayed when hovering or focusing the button.

Delay before showing the tooltip.

Distance in pixels between the button and the tooltip.

Preferred placement of the tooltip relative to the button.

"ghost" | "link" | "outline" | "soft" | "solid"

predefinito:"outline"

Visual treatment of the button surface. link uses compact text styling without a filled surface or border; render composition determines native semantics.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Opzioni visive

Nomi accessibili

Tooltip

Proprietà dello stato

Azioni elevate

Azioni raggruppate

Link e moduli

Controlli compatti e rotondi

Props

​Panoramica

​Utilizzo

​Opzioni visive

​Nomi accessibili

​Tooltip

​Proprietà dello stato

​Azioni elevate

​Azioni raggruppate

​Link e moduli

​Controlli compatti e rotondi

​Props

Panoramica

Utilizzo

Opzioni visive

Nomi accessibili

Tooltip

Proprietà dello stato

Azioni elevate

Azioni raggruppate

Link e moduli

Controlli compatti e rotondi

Props