Saltar al contenido principal

Resumen

LightIconButton compone IconButton con una superficie fantasma y un tamaño pequeño. Proporciona un nombre accesible y contenido de icono decorativo.

”Uso”

El énfasis estándar usa texto neutro secundario; el énfasis sutil usa texto terciario. La apariencia explícita del elemento secundario tiene prioridad sobre los valores de ButtonGroup, seguida de los valores predeterminados del componente. Los colores semánticos conservan su propio tratamiento de contraste. Los controles pequeños son de 24 px con un icono de 14 px; los controles medianos son de 32 px con un icono de 16 px. Los controles compactos usan 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 es type="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

Importa LightIconButton 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 ranura actions 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.
Un botón sin un controlador 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.