نظرة عامة
استخدم المكوّن المشتركMainButton لإجراء بارز. يتكوّن من
Button مع سطح مصمت، وارتفاع، ونص شبه عريض، وحشوة أفقية بمقدار 12px. لونه الافتراضي محايد وحجمه هو md.
استخدام
الخيارات المرئية
قارن بين المظهرين المصمت والمحدد عبر الأحجام الافتراضية والصغيرة، بالإضافة إلى حالتي التعطيل والتحميل.ملكية الحالة
يستخدمMainButton نموذج حالة Button ولا يضيف أي حالة خاصة به. يوفّر تطبيقك loading وdisabled؛ ولا توجد أوضاع تحديد مضبوطة وغير مضبوطة. راجع مثال ملكية حالة Button لإدارة إجراء غير متزامن.
الأشكال والعرض
fullWidth أو توفّر تنسيق
تخطيط للتطبيق. تجاوز variant وcolor وsize وelevated حسب الحاجة؛
على سبيل المثال، استخدم variant="outline" وelevated={false} لإجراء ذي مخطط خارجي.
باستخدام color="inherit"، اختر صيغة غير ممتلئة صراحةً أو ورّث واحدة من ButtonGroup. تؤدي القيمة الافتراضية الممتلئة المستقلة ذات اللون الموروث إلى ظهور خطأ وقت التشغيل.
أبقِ تخطيط الصفحة ضمن تنسيق تطبيقك.
التفاعل
يقبلMainButton سمات Button الأصلية، ومعالجات الأحداث، والمراجع، ومواضع الأيقونات،
وخصائص loading وdisabled. تكون الأزرار افتراضيًا من type="button"؛
اضبط type="submit" صراحةً لإرسال النموذج.
استخدم href لرابط. وفّر render لاختيار جذر مخصص، بما في ذلك
رابط موجّه يملكه التطبيق. عيّن nativeButton={false} وrole="link" لـ
عارض تنقّل. تُبقي الأزرار الأصلية المخصصة nativeButton مضبوطًا على true.
يمكن لـ ButtonGroup تعيين حجم وسطح
ولون مشتركين. يأخذ مظهر العنصر الفرعي المحدد صراحةً الأسبقية على المجموعة، يليه
الإعدادات الافتراضية للمكوّن. تُمرَّر فئات المستهلك، بما في ذلك دوال الحالة،
إلى الجذر.
الخصائص
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
افتراضي:"true"
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
ReactNode
Decorative content displayed after the label.
boolean
افتراضي:"false"
Whether the button should be focusable when disabled.
boolean
Expands the button to fill its container width.
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.
"center" | "end" | "start"
Where the loading indicator appears.
center hides the content while preserving its layout space; start and end keep children and the opposite icon visible and replace the corresponding icon with the spinner.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.ShortcutDefinition
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
string
Localized text between sequence steps. Defaults to then.
"md" | "sm"
Button height:
sm (24px) or md (32px). The link variant uses its content height at either size.ReactNode
Decorative content displayed before the label.
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
"ghost" | "link" | "outline" | "soft" | "solid"
افتراضي:"solid"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.