زر اللمعان (Shimmer Button)

يضيف تأثير زر اللمعان (Shimmer Button) بريقًا يمرّ على الزر، لأهم إجراء في الصفحة.

التثبيت

bash

npx @smicolon/cli add shimmer-button

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

معاينة

ألوان مخصّصة

تقبل الخاصية background أي لون أو تدرّج لوني تقبله CSS، وتحدد shimmerColor لون البريق. ومتغيرات CSS مثل var(--chart-2) تتبع الوضعين الفاتح والداكن.

إتاحة الوصول (accessibility)

الزر عنصر <button> أصلي، فيقبل سماته المعتادة مثل onClick، disabled، type، ويُظهر حلقة التركيز عند الانتقال إليه بمفتاح Tab.
إذا فعّل المستخدم إعداد prefers-reduced-motion، لا يُرسم البريق، ويبقى شكل الزر كما هو دونه.
يمرّ البريق باتجاه القراءة: من اليسار إلى اليمين في الإنجليزية، ومن اليمين إلى اليسار في العربية.
يأخذ النص اللون --primary-foreground. إذا غيّرت background، فتأكد أن النص ما زال واضحًا بتباين كافٍ.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	نص الزر.
`shimmerColor`	`string`	`"color-mix(in oklch, var(--primary-foreground) 35%, transparent)"`	لون البريق.
`shimmerDuration`	`string`	`"2s"`	مدة مرور البريق مرة واحدة.
`shimmerSize`	`string`	`"100%"`	عرض البريق، بطول أو بنسبة مئوية من عرض الزر.
`background`	`string`	`"var(--primary)"`	لون الخلفية أو التدرّج اللوني.
`borderRadius`	`string`	`"0.5rem"`	نصف قطر الزوايا.
`...props`	`ButtonHTMLAttributes`	لا يوجد	سمات الزر الأصلية، مثل `onClick`، `disabled`.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { ShimmerButton } from "@/components/ui/shimmer-button"

<ShimmerButton>تسوّق التشكيلة</ShimmerButton>

<ShimmerButton
  background="linear-gradient(135deg, var(--chart-2), var(--chart-3))"
  shimmerColor="color-mix(in oklch, var(--primary-foreground) 35%, transparent)"
  shimmerSize="40%"
>
  تسوّق التشكيلة
</ShimmerButton>