رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

دکمه

وضعیت: در حال بازبینی 
<button class="hq-button" type="button">ثبت درخواست</button>
<button class="hq-button hq-button--secondary" type="button">مشاهدهٔ نمونه‌کارها</button>
<button class="hq-button hq-button--ghost" type="button">انصراف</button>
<button class="hq-button hq-button--danger" type="button">حذف پروژه</button>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • برای اجرای یک اقدام: ثبت، ذخیره، ارسال، حذف.
  • برای قدم اصلی بعدی در یک مسیر، مثل «شروع ارزیابی» یا «برای تحول آماده‌اید؟».

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای رفتن به صفحهٔ دیگر در میان متن؛ آن‌جا از لینک استفاده کنید.
  • برای انتخاب یک گزینه یا فیلتر؛ این‌ها در موج اول کامپوننت جداگانه دارند.

گونه‌ها

Section titled “گونه‌ها”
گونه کلاس کاربرد
اصلی hq-button مهم‌ترین اقدام صفحه یا بخش؛ حداکثر یکی در هر بخش
ثانویه hq-button--secondary اقدام مهم دیگر کنار دکمهٔ اصلی
بی‌زمینه hq-button--ghost اقدام کم‌اهمیت: انصراف، بازگشت، اقدام‌های جدول
خطرناک hq-button--danger اقدام برگشت‌ناپذیر مثل حذف؛ همیشه با تایید

اندازه‌ها

Section titled “اندازه‌ها”
<button class="hq-button" type="button">بزرگ (پیش‌فرض)</button>
<button class="hq-button hq-button--md" type="button">متوسط</button>
<button class="hq-button hq-button--sm" type="button">کوچک</button>

بزرگ پیش‌فرض است. متوسط برای فرم‌های فشرده، و کوچک فقط برای جدول و نوارابزار.

با آیکن

Section titled “با آیکن”

آیکن بعد از متن می‌آید، یعنی در چیدمان راست‌به‌چپ سمت چپ آن. پیکان رو به چپ است، چون مسیر خواندن فارسی به چپ پیش می‌رود.

شروع ارزیابی 
<a class="hq-button" href="#">
  شروع ارزیابی
  <svg class="hq-button__icon" viewBox="0 0 32 32" aria-hidden="true"><path d="M14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z"/></svg>
</a>

ترتیب دکمه‌ها

Section titled “ترتیب دکمه‌ها”

در گروه دکمه‌ها، دکمهٔ اصلی اول می‌آید، یعنی سمت راست.

<button class="hq-button" type="button">ذخیره و ادامه</button>
<button class="hq-button hq-button--ghost" type="button">انصراف</button>

برچسب

Section titled “برچسب”
  • فعل و کوتاه، حداکثر سه واژه: «ثبت درخواست»، نه «درخواست خود را ثبت کنید».
  • مشخص: «حذف پروژه»، نه «تایید».
  • بدون نقطه و بدون علامت تعجب. پرسش فقط برای جملهٔ امضای «برای تحول آماده‌اید؟».
انجام بدهیک دکمهٔ اصلی و یک دکمهٔ بی‌زمینه برای اقدام جایگزین.
انجام ندهدو دکمهٔ اصلی کنار هم؛ کاربر نمی‌داند کدام مهم‌تر است.