Resumen
LightIconButton compone IconButton con una superficie fantasma y un tamaño pequeño. Proporciona un nombre accesible y contenido de icono decorativo.
”Uso”
size="xs" y son de 20 px.
Opciones visuales
Compare el énfasis en tamaños pequeño y mediano, incluidos los estados seleccionado, de carga y deshabilitado.Estado e interacción
El botón gestiona la activación mediante teclado, el comportamiento deshabilitado y de carga, las refs, los atributos nativos y la composición de renderizado. El valor predeterminado nativo estype="button". Usa aria-pressed para los conmutadores y aria-expanded para los elementos desplegables. La aplicación gestiona estos estados y puede establecer color="accent" para resaltar una acción seleccionada. El foco del teclado usa el anillo de foco compartido.
El texto de la información sobre herramientas es opcional y no sustituye un nombre accesible de aria-label o aria-labelledby. Establece href para un enlace. Para el enrutamiento controlado por la aplicación, proporciona render, nativeButton={false} y role="link".
Actualización de controles existentes
ImportaLightIconButton desde twenty-ui/components. Reemplaza Icon={IconPlus} por elementos secundarios <IconPlus />, small/medium por sm/md, accent="tertiary" por emphasis="subtle" y testId por data-testid. Reemplaza las marcas sintéticas active y focus por estado semántico y foco real del teclado.
Reemplaza LightIconButtonGroup por ButtonGroup usando attached={false} y elementos secundarios explícitos. Establece disabled en las acciones no disponibles, incluidas las acciones sin un controlador de clic. Los contenedores y los activadores de información sobre herramientas pueden permanecer alrededor de cada elemento secundario.
Acciones de fila
Utiliza un ListItem pasivo con una ranuraactions para controles independientes. Pasa un LightIconButton directamente o usa ButtonGroup para varios botones. Cada botón tiene su propio nombre accesible, controlador de clic y estado deshabilitado. Envuelve los activadores de menús desplegables directamente alrededor del botón.
onClick puede permanecer habilitado cuando un menú desplegable circundante gestiona su interacción. Establece explícitamente disabled para los botones no disponibles. Mantén los controles independientes junto a un ListItemButton accionable para que cada uno conserve su propio foco y activación.
”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"
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"
predeterminado:"standard"
Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own 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"
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"
predeterminado:"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"
predeterminado:"ghost"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.