بنر (Banner)

معرفی

کامپوننت Banner برای نمایش اطلاعیه‌های سیستمی، هشدارهای نگهداری، یا پیام‌های مهم در بالای صفحه استفاده می‌شود. برخلاف Alert که درون محتوا قرار می‌گیرد، Banner معمولاً در بالاترین نقطه صفحه قرار دارد.

چه زمانی استفاده کنیم:

• برای اطلاع‌رسانی نسخه جدید یا قابلیت‌های تازه
• برای هشدار نگهداری سرور یا قطعی سرویس
• برای پیام‌های سیستمی که همه کاربران باید ببینند

چه زمانی استفاده نکنیم:

• برای پیام‌های مرتبط با یک بخش خاص محتوا — از هشدار (Alert) استفاده کنید
• برای اعلان‌های موقت پس از یک عملیات — از اعلان (Sonner) استفاده کنید
• برای خطاهای فرم — از فیلد (Field) استفاده کنید

استفاده

import { Banner } from '@parto-system-design/ui'

;<Banner variant="info">نسخه جدید سامانه منتشر شده است.</Banner>

حالت‌ها و انواع

انواع بنر

پنج نوع بنر در دسترس است:

<Banner variant="info">اطلاع‌رسانی</Banner>
<Banner variant="warning">هشدار</Banner>
<Banner variant="destructive">خطا</Banner>
<Banner variant="success">موفقیت</Banner>
<Banner variant="neutral">خنثی</Banner>

قابل رد کردن

با dismissible کاربر می‌تواند بنر را ببندد:

<Banner variant="info" dismissible onDismiss={() => console.log('بسته شد')}>
  این بنر قابل بستن است.
</Banner>

با آیکون و اکشن

import { InfoIcon } from 'lucide-react'

;<Banner
  variant="info"
  icon={<InfoIcon className="size-4" />}
  action={
    <Button size="sm" variant="secondary">
      به‌روزرسانی
    </Button>
  }
>
  نسخه جدید در دسترس است.
</Banner>

راهنمای استفاده

جدول ویژگی‌ها

دسترسی‌پذیری

• از role="banner" برای تشخیص توسط screen reader استفاده می‌شود
• دکمه بستن دارای aria-label="بستن" است
• با Escape قابل بستن نیست (عمدی — بنر نباید اشتباهاً بسته شود)

کامپوننت‌های مرتبط

• اگر پیام مرتبط با بخشی خاص از محتواست → از هشدار (Alert) استفاده کنید
• اگر اعلان موقت پس از عملیات نیاز دارید → از اعلان (Sonner) استفاده کنید
• اگر پیام متنی ساده درون محتوا نیاز دارید → از پیام متنی (Callout) استفاده کنید