الزر
يعرض زراً أو مكوّناً يبدو كزر.
Loading demo: button-real-world
التثبيت
npx sdaia-ui@latest add button
الاستخدام
import { Button } from "@/components/ui/button"import { Button } from "@/components/ui/button"الأمثلة
الحجم
استخدم خاصية `size` لتغيير size لـالزر.
Loading demo: button-size
الافتراضي
النمط الافتراضي للزر.
Loading demo: button-primary
الثانوي
Use `style="الثانوي - صُلب"` for secondary actions.
Loading demo: button-secondary-solid
خطّي
Use `style="الثانوي - خطّي"` for outlined secondary actions.
Loading demo: button-secondary-outline
Neutral
Use variant="neutral" for high-contrast dark actions (Figma Style=Neutral).
Loading demo: button-neutral
خافت
Use `style="خافت"` for low-emphasis inline actions.
Loading demo: button-subtle
Transparent
Use variant="transparent" for link-style actions (Figma Style=Transparent).
Loading demo: button-transparent
مع Leading أيقونة
أضف leadingIcon لتضمين أيقونة قبل نص الزر.
Loading demo: button-leading-icon
أيقونة
يُصيِّر زراً بأيقونة بدون نص.
Loading demo: button-icon-only
Destructive
Use destructive={true} with any style (e.g. variant="primary" destructive). Matches Figma Destructive=True.
Loading demo: button-destructive
مرجع الواجهة البرمجية
ButtonProps
خصائص مكوّن Button.
Prop | Type | Default | Required |
|---|---|---|---|
variant | "neutral" | "primary" | "secondary-solid" | "secondary-outline" | "subtle" | "transparent" | "primary" | optional |
destructive | boolean | false | optional |
size | "sm" | "md" | "lg" | "md" | optional |
disabled | boolean | false | optional |
selected | boolean | false | optional |
iconOnly | boolean | false | optional |
leadingIcon | ReactNode | — | optional |
trailingIcon | ReactNode | — | optional |
fullWidth | boolean | false | optional |
as | ElementType | — | optional |
children | ReactNode | — | optional |