Salt la conținutul principal

Prezentare generală

LightIconButton compune IconButton cu o suprafață ghost și o dimensiune mică. Furnizați un nume accesibil și conținut decorativ pentru pictogramă.

Utilizare

Accentul standard utilizează text neutru secundar; accentul subtil utilizează text terțiar. Aspectul explicit al elementului copil are prioritate față de valorile ButtonGroup, urmat de valorile implicite ale componentei. Culorile semantice își păstrează propriul tratament de contrast. Controalele mici au 24px cu o pictogramă de 14px; controalele medii au 32px cu o pictogramă de 16px. Controalele compacte utilizează size="xs" și au 20px.

Opțiuni vizuale

Comparați accentuarea la dimensiuni mici și medii, inclusiv stările selectată, de încărcare și dezactivată.

Stare și interacțiune

Butonul gestionează activarea de la tastatură, comportamentul de dezactivare și încărcare, referințele, atributele native și compunerea randării. Valoarea implicită nativă este type="button". Utilizați aria-pressed pentru comutatoare și aria-expanded pentru elementele de extindere. Aplicația gestionează aceste stări și poate seta color="accent" pentru a evidenția o acțiune selectată. Focalizarea de la tastatură utilizează indicatorul de focalizare partajat. Textul indicativ este opțional și nu înlocuiește un nume accesibil din aria-label sau aria-labelledby. Setați href pentru un link. Pentru rutarea gestionată de aplicație, furnizați render, nativeButton={false} și role="link".

Actualizarea controalelor existente

Importați LightIconButton din twenty-ui/components. Înlocuiți Icon={IconPlus} cu copii <IconPlus />, small/medium cu sm/md, accent="tertiary" cu emphasis="subtle" și testId cu data-testid. Înlocuiți indicatorii sintetici active și focus cu starea semantică și focalizarea reală de la tastatură. Înlocuiți LightIconButtonGroup cu ButtonGroup utilizând attached={false} și copii expliciți. Setați disabled pentru acțiunile indisponibile, inclusiv pentru acțiunile fără un handler de clic. Containerele și declanșatoarele de indicii pot rămâne în jurul fiecărui copil.

Acțiuni pentru rând

Utilizați un ListItem pasiv cu un slot actions pentru controale independente. Transmiteți direct un LightIconButton sau utilizați ButtonGroup pentru mai multe butoane. Fiecare buton are propriul nume accesibil, propriul gestionar de clic și propria stare de dezactivare. Încadrați direct declanșatoarele listelor derulante în jurul butonului.
Un buton fără handler onClick poate rămâne activat atunci când o listă derulantă din jur gestionează interacțiunea sa. Setați explicit disabled pentru butoanele indisponibile. Păstrați controalele independente lângă un ListItemButton acționabil, astfel încât fiecare să își păstreze propriul focus și propria activare.

Proprietăți

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
obligatoriu
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"
implicit:"standard"
Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.
boolean
implicit:"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
implicit:"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"
implicit:"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"
implicit:"ghost"
Visual treatment of the button surface. link uses compact text styling without a filled surface or border; render composition determines native semantics.