Button

التثبيتCopy Anchor Link

يثبّت هذا الأمر أيضًا Spinner لحالة التحميل.

الاستخدامCopy Anchor Link

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>إرسال الطلب</Button>;
}

البنيةCopy Anchor Link

Root (<button type="button">، أو أي عنصر عبر render)، وIcon اختيارية قبل Label أو بعده، وSpinner يحل محل الأيقونة الأولى أثناء loading.

أمثلةCopy Anchor Link

الأنماطCopy Anchor Link

الإجراء المدمّرCopy Anchor Link

أضف destructive للإجراءات التي تحذف أو لا يمكن التراجع عنها. لكل نمط ما عدا neutral نسخة مدمّرة، وneutral يرجع إلى primary المدمّر.

للخلفيات الملونةCopy Anchor Link

أضف onColor على تعبئات العلامة (background-primary وترويسة التنقل). تكون تسميات الإجراء المدمّر بيضاء هناك، والنص هو الذي يحمل المعنى.

الأحجامCopy Anchor Link

ارتفاع sm ‏24px، وmd ‏32px (الافتراضي)، وlg ‏40px.

الحالاتCopy Anchor Link

يشير aria-pressed إلى زر تبديل (أو data-selected في القوائم والمجموعات)، ويمنع disabled الإجراء، ويعرض loading التقدّم.

يستبدل loading الأيقونة الأولى بمؤشر دوّار، ويحافظ على العرض، ويتجاهل النقرات. ويبقى الزر قابلًا لاستقبال التركيز.

الأيقوناتCopy Anchor Link

ضع على أيقونة Hugeicons الوسم data-icon="inline-start" أو "inline-end". تحتاج أزرار الأيقونة فقط إلى iconOnly وإلى aria-label.

كرابطCopy Anchor Link

لجعل الرابط يبدو كزر، اعرض عنصر a عبر الخاصية render:

<Button nativeButton={false} render={<a href="/services" />}>
  الخدمات
</Button>

اتجاه RTLCopy Anchor Link

تتبدل جهات الأيقونات والمسافات والحشوات من تلقاء نفسها (خصائص منطقية). أما الأيقونات الاتجاهية كالأسهم فلا تنقلب: أضف rtl:-scale-x-100.

إمكانية الوصولCopy Anchor Link

• عنصر <button type="button"> أصلي: يُعلَن دور button واسمه.
• حلقة التركيز على :focus-visible فقط: حد border-black بسمك 2px (أبيض في الوضع الداكن وعلى تعبئات العلامة)، وفاصل 1px.
• تحتاج أزرار الأيقونة فقط إلى aria-label؛ والأيقونات مخفية عن قارئات الشاشة.
• يشير aria-pressed إلى زر تبديل مضغوط. ويضبط loading القيمتين aria-busy وaria-disabled؛ والمؤشر الدوّار زخرفي.

مرجع APICopy Anchor Link

الدالة buttonVariants() مُصدَّرة لتنسيق عناصر أخرى كأزرار.

الاختلافات عن DGACopy Anchor Link

التباينCopy Anchor Link