زر (Button)

يتيح لك مكوّن زر (Button) تنفيذ إجراء، بعدة أنماط (variant) وأحجام، مع حالة تحميل.

التثبيت

bash

npx @smicolon/cli add button

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

الأنماط (variant)

الأحجام

حالة التحميل

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	النمط (variant) المرئي للزر.
`size`	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`	حجم الزر.
`loading`	`boolean`	`false`	يعرض مؤشر تحميل دوّارًا.
`loadingLabel`	`string`	`"Loading"`	النص الذي يقرؤه قارئ الشاشة أثناء التحميل.
`disabled`	`boolean`	`false`	يعطّل الزر.
`asChild`	`boolean`	`false`	يعرض العنصر الابن بدل الزر.
`onClick`	`(event) => void`	لا يوجد	تُستدعى عند الضغط على الزر.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

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

export function Example() {
  return (
    <Button variant="default" size="default">
      حفظ التغييرات
    </Button>
  )
}