IconButton

Resumen

IconButton compone Button con una superficie cuadrada o redonda. Pase el icono como elemento secundario y proporcione un nombre accesible con aria-label o aria-labelledby. El contenido del icono es decorativo y está oculto para la tecnología de asistencia.

Uso

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

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

Los tamaños son xs (20px), sm (24px) y md (32px). Los valores predeterminados son md, outline y neutral. Las variantes y los colores coinciden con Button. Usa shape="round" para un botón circular; la forma predeterminada es square.

Opciones visuales

Compare una opción visual a la vez. Use los ejemplos de tooltip con nombre, elevado y agrupado para la composición.

Nombres accesibles

Use aria-label para un nombre proporcionado directamente en el control. Cuando el texto visible ya nombra la acción, use aria-labelledby para hacer referencia a él en su lugar. Se requiere al menos una prop de nombre.

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>
);

Información sobre herramientas

Añade tooltip para mostrar texto al pasar el cursor y al enfocar con el teclado. Mantenga aria-label o aria-labelledby como el nombre accesible de la acción. Los botones deshabilitados y en carga conservan la información sobre herramientas al pasar el cursor.

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>
);

La información sobre herramientas se muestra de forma predeterminada abajo, con un retraso de 1000ms y un desplazamiento de 5px. Usa tooltipPlace, tooltipDelay y tooltipOffset para ajustarla. Al omitir tooltip, el botón se muestra directamente.

Propiedad del estado

Tu aplicación proporciona loading y disabled. Ambos impiden la activación. El estado de carga conserva las dimensiones cuadradas y la etiqueta accesible. El botón no realiza seguimiento de un valor seleccionado ni establece la carga automáticamente después de un clic. El enfoque nativo con el teclado sigue al navegador; usa aria-pressed cuando tu aplicación controle un estado de alternancia.

Acciones elevadas

Usa elevated para añadir una sombra y desenfoque de fondo. El botón de contorno neutro predeterminado también obtiene una superficie con borde y colores de icono e interacción a juego. Otras variantes y colores semánticos conservan su paleta actual. elevated tiene como valor predeterminado false. No cambia la posición, la visibilidad ni el tamaño. El tamaño sigue siendo md (32px) de forma predeterminada; establece size="sm" para un control de 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>
);

Omite elevated o establécelo en false para restaurar la apariencia estándar. Los botones elevados admiten las mismas descripciones emergentes, estados de carga, enlaces e interacciones de teclado. Sustituye los controles FloatingIconButton existentes por IconButton elevated. Pasa el icono como elementos secundarios, usa aria-label nativo y asigna small a sm y medium a md. Proporciona size="sm" cuando el control anterior usaba su tamaño predeterminado. El foco nativo y aria-pressed sustituyen el foco sintético y los indicadores activos. Se elimina FloatingIconButtonGroup. Combina ButtonGroup con IconButton para acciones agrupadas y conserva cualquier superficie flotante compartida en tu diseño.

Acciones agrupadas

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 proporciona valores predeterminados para el tamaño, la variante y el color, además de esquinas contiguas. Las props explícitas de los elementos secundarios tienen prioridad de forma independiente, incluido size="xs". Los botones individuales no necesitan una propiedad position. Mantenga los botones unidos del mismo tamaño para que sus bordes queden alineados. Establezca el tamaño en el grupo y deje que cada botón lo herede.

Enlaces y formularios

Sin un render personalizado, href representa un ancla, a menos que nativeButton sea explícitamente verdadero. Para un ancla de navegación personalizada o un enlace de enrutador, establezca nativeButton={false} y role="link". El renderizador puede gestionar su destino sin un href de IconButton. Mantenga nativeButton en verdadero para un botón nativo personalizado y use falso para un elemento de acción no nativo. Se conservan las props explícitas de nativeButton y role. Los enlaces deshabilitados y en carga no se pueden activar. El enrutamiento permanece en la aplicación. Los atributos de botones nativos y anclas, los controladores de eventos, los detalles de eventos, las referencias y la composición de renderizado se transfieren a Button. La referencia recibe el elemento raíz real. La composición de Tooltip conserva esa raíz y su nombre accesible. El valor predeterminado es type="button"; establece type="submit" explícitamente para el envío de formularios.

Controles compactos y redondos

Usa size="xs" para un control de 20px y shape="round" para bordes circulares. Los controles RoundedIconButton existentes pasan a ser IconButton con shape="round", variant="solid" y color="accent". Asigna su antiguo tamaño small a xs y el tamaño medium a sm. Proporciona elementos secundarios de icono y un nombre accesible.

”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

requerido

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"

predeterminado:"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

predeterminado:"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

predeterminado:"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"

predeterminado:"square"

Square or round icon control.

"md" | "sm" | "xs"

predeterminado:"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"

predeterminado:"outline"

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

Desarrolladores

Aplicaciones

API

Autoalojamiento

Contribuir

Biblioteca de IU

Resumen

Uso

Opciones visuales

Nombres accesibles

Información sobre herramientas

Propiedad del estado

Acciones elevadas

Acciones agrupadas

Enlaces y formularios

Controles compactos y redondos

”Props”

​Resumen

​Uso

​Opciones visuales

​Nombres accesibles

​Información sobre herramientas

​Propiedad del estado

​Acciones elevadas

​Acciones agrupadas

​Enlaces y formularios

​Controles compactos y redondos

​”Props”

Resumen

Uso

Opciones visuales

Nombres accesibles

Información sobre herramientas

Propiedad del estado

Acciones elevadas

Acciones agrupadas

Enlaces y formularios

Controles compactos y redondos

”Props”