تم تاریک

لینک باتن Link Button ​

کامپوننت Link Button ترکیبی از رفتار حرکتی یک دکمه (Button) و ظاهر سبک یک لینک (Hyperlink) است. این کامپوننت زمانی استفاده می‌شود که می‌خواهیم یک اقدام (Action) یا ناوبری (Navigation) را با وزن بصری بسیار کم و بدون شلوغ کردن صفحه در اختیار کاربر قرار دهیم.

نمونه زنده ​

مشاهده لاگ‌هاSelect option
noneSelect option
noneSelect option

آناتومی ​

این کامپوننت ساختاری بسیار سبک و خطی دارد و از اجزای زیر تشکیل شده است:

(عکس ۱: تصویر آناتومی Link Button که آیکون سمت راست، متن مرکز و آیکون سمت چپ را با خطوط راهنما مشخص می‌کند)

  • متن (Label): هسته اصلی کامپوننت که هدف اکشن یا مقصد لینک را مشخص می‌کند.
  • آیکون پیشین (Leading Icon - اختیاری): آیکونی که در سمت راست متن (در حالت RTL) قرار می‌گیرد و به درک سریع‌تر ماهیت دکمه کمک می‌کند (مانند آیکون سطل زباله برای حذف).
  • آیکون پسین (Trailing Icon - اختیاری): آیکونی که در سمت چپ متن قرار می‌گیرد و معمولاً برای نشان دادن جهت یا رفتار دکمه استفاده می‌شود (مانند آیکون فلش خروجی یا پیکان ناوبری).

ساختار ​

به دلیل ماهیت خطی و ظریف این کامپوننت، هماهنگی فواصل آن با ساختار متون اطراف بسیار مهم است.

( تصویر فنی کامپوننت Link Button همراه با خطوط راهنما که پدینگ‌ها، گپ بین آیکون و متن، و تراز عمودی را به پیکسل نشان می‌دهد)

رنگ و تایپوگرافی ​

  • رنگ شاخص: تک ورینت اصلی این کامپوننت به رنگ آبی برند آروان رندر می‌شود.
  • تایپوگرافی: اندازه قلم هماهنگ با متن بدنه (Body Text) سرخآب انتخاب می‌شود.

فواصل داخلی ​

  • پدینگ‌ها (Padding): این کامپوننت فاقد پدینگ یا کانتینر رنگی در پس‌زمینه است (Padding: 0).
  • فاصله آیکون تا متن (Gap): فاصله افقی بین آیکون‌ها (چه پیشین و چه پسین) با متن مرکز، دقیقاً 6px یا 8px (بر اساس توکن Spacing سیستم) تنظیم می‌شود.
  • سایز آیکون‌ها: ابعاد آیکون‌های دو طرف به صورت استاندارد 20px * 20px است.

موارد کاربرد ​

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

  • اکشن‌های داخل جدول: برای ستون اکشن‌ها در جداول حجیم که استفاده از دکمه‌های پس‌زمینه دار باعث شلوغی بصری می‌شود.
  • بیشتر بخوانید / مشاهده مستندات: در انتهای متون راهنما یا کارت‌های سطح ۲ (Contextual Hint) برای هدایت کاربر به مستندات کامل.

تفاوت با دکمه‌های Ghost و لینک‌های معمولی ​

  • Ghost Button: یک دکمه تعاملی واقعی است که به طور معمول یک عمل (مثل باز کردن ساید پنل یا اجرای یک اسکریپت) را بدون لود مجدد صفحه انجام می‌دهد.
  • Text Link: یک لینک سنتی داخل متن است که کاربر را به آدرس وب دیگری (URL) هدایت می‌کند و معمولاً آیکون‌های تعاملی دوطرفه ندارد.

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

بایدها ​

  • جهت آیکون‌ها: اگر از آیکون پیکان برای ناوبری استفاده می‌کنید، در زبان فارسی (RTL) جهت پیکان پسین باید به سمت چپ (←) باشد.
  • وضوح معنایی: متن دکمه لینکی باید کاملا اکشن‌محور باشد (مانند: مشاهده لاگ‌ها، ویرایش دسترسی).
  • لینک به خارج: برای لینک‌هایی که به خارج از پنل ارجاع داده می‌شوند، فقط و فقط از لینک باتن با آیکون لینک به تب جدید استفاده کنید.
  • موقعیت: این کامپوننت را در جاهایی استفاده کنید که ترجیح می‌دهید تمرکز اصلی کاربر روی دکمه‌های Primary یا Secondary صفحه باقی بماند.

نبایدها ​

  • از قرار دادن دو آیکون هم‌زمان در دو طرف متن بدون دلیل موجه خودداری کنید، معمولا استفاده از یک آیکون (یا پیشین یا پسین) برای حفظ سادگی کافی است.
  • هرگز برای اعمال مخرب حیاتی (مثل حذف کل دیتاسنتر) از Link Button استفاده نکنید، این کار ریسک خطای کاربر را بالا می‌برد.

رفتار ​

  • حالت Hover: با قرار گرفتن موس روی دکمه، رنگ آبی آن کمی تیره تر می‌شود.