نظرة عامة
يؤلفLightIconButton بين IconButton وسطح شفاف وحجم صغير. وفّر اسمًا متاحًا ومحتوى أيقونة زخرفيًا.
استخدام
size="xs" ويبلغ حجمها 20px.
خيارات مرئية
قارن التأكيد عند الأحجام الصغيرة والمتوسطة، بما في ذلك حالات التحديد والتحميل والتعطيل.الحالة والتفاعل
يتولى Button التنشيط بلوحة المفاتيح، وسلوك التعطيل والتحميل، والمراجع، والسمات الأصلية، وتأليف العرض. القيمة الأصلية الافتراضية هيtype="button". استخدم aria-pressed للتبديلات وaria-expanded للإفصاحات. يتولى التطبيق هذه الحالات ويمكنه تعيين color="accent" لإبراز إجراء محدد. يستخدم تركيز لوحة المفاتيح حلقة التركيز المشتركة.
نص Tooltip اختياري ولا يحل محل اسم يمكن الوصول إليه من aria-label أو aria-labelledby. عيّن href لرابط. للتوجيه الذي يملكه التطبيق، وفّر render وnativeButton={false} وrole="link".
تحديث عناصر التحكم الحالية
استوردLightIconButton من twenty-ui/components. استبدل Icon={IconPlus} بأبناء <IconPlus />، وsmall/medium بـsm/md، وaccent="tertiary" بـemphasis="subtle"، وtestId بـdata-testid. استبدل علامتي active وfocus الاصطناعيتين بالحالة الدلالية وتركيز لوحة المفاتيح الفعلي.
استبدل LightIconButtonGroup بـButtonGroup باستخدام attached={false} وأبناء صريحين. عيّن disabled على الإجراءات غير المتاحة، بما في ذلك الإجراءات التي لا تحتوي على معالج نقر. يمكن أن تبقى الأغلفة ومشغلات التلميحات حول كل عنصر تابع.
إجراءات الصف
استخدم ListItem غير تفاعلي مع فتحةactions لعناصر التحكم المستقلة. مرّر LightIconButton واحدًا مباشرةً، أو استخدم ButtonGroup لأزرار متعددة. يحتفظ كل زر باسمه المتاح، ومعالج النقر، وحالة التعطيل الخاصة به. لفّ مشغلات القائمة المنسدلة مباشرةً حول الزر.
onClick مفعّلًا عندما تتولى قائمة منسدلة محيطة تفاعله. عيّن disabled صراحةً للأزرار غير المتاحة. أبقِ عناصر التحكم المستقلة بجانب ListItemButton قابل للتنفيذ بحيث يحتفظ كل منها بتركيزه وتفعيله الخاصين.
الإزاحة
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
مطلوب
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"
افتراضي:"standard"
Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.
boolean
افتراضي:"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
افتراضي:"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"
افتراضي:"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"
افتراضي:"ghost"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.