Buttons and Button Groups

📖 Theory

एक button जो plain text जैसा दिखता है

आप FestConnect के Register button को class="btn-primary" से style करते हैं और यह flat blue text बनकर निकलता है, कोई shape नहीं, कोई padding नहीं। इसी बीच आप चाहते हैं event filter (All, Robotics, Dance) एक जुड़े toolbar जैसा दिखे, gaps वाले तीन stray buttons जैसा नहीं।

दोनों जल्दी fix हो जाते हैं एक बार rule पता हो: एक Bootstrap button को साथ काम करने वाली दो classes चाहिए, और grouping सिर्फ़ एक wrapper दूर है।

✏️ Formula

btn shape है, btn-* colour है

हर Bootstrap button दो classes है:

• `btn` button को shape देता है: padding, rounded corners, pointer cursor।
• `btn-primary` (या कोई और variant) colour और fill देता है।

दोनों में से कोई अकेले काम नहीं करता। btn अकेला एक shaped पर colourless button है; btn-primary अकेला बिना button shape वाला coloured text है। आप लगभग हमेशा class="btn btn-primary" चाहेंगे, दोनों साथ।

📖 Theory

Variants, sizes, और groups

• Solid: btn-primary, btn-success, btn-danger, ... contextual colour से भरे हुए।
• Outline: btn-outline-primary, ... coloured border वाला transparent, secondary actions के लिए।
• Size: btn-lg या btn-sm जोड़िए।
• Disabled: disabled attribute (या links पर .disabled)।
• Group: buttons को <div class="btn-group"> में wrap कीजिए और वे edge to edge जुड़कर एक segmented toolbar बन जाते हैं, filters के लिए ideal।

⌨️ Practical

FestConnect buttons और एक filter group

<!-- primary action + secondary (outline) action -->
<button class="btn btn-primary">Register</button>
<button class="btn btn-outline-secondary">Clear</button>

<!-- large call to action -->
<button class="btn btn-success btn-lg">Pay Fee</button>

<!-- a joined filter toolbar -->
<div class="btn-group" role="group">
  <button class="btn btn-outline-primary">All</button>
  <button class="btn btn-outline-primary">Robotics</button>
  <button class="btn btn-outline-primary">Dance</button>
</div>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Primary या outline?

एक FestConnect card में दो buttons हैं: 'Register' (मुख्य चीज़ जो आप लोगों से चाहते हैं) और 'Cancel'। हर एक को कौन सा button variant फिट होता है, और एक के लिए outline इस्तेमाल करना design को कैसे मदद करता है?

🧩 Quiz

एक student `<button class="btn-danger">Delete</button>` लिखता है और यह बिना button shape या padding के red text की तरह render होता है। क्या missing है?

1. Base class btn: यह class="btn btn-danger" होना चाहिए
2. disabled attribute
3. एक <div class="btn-group"> wrapper
4. कुछ नहीं: btn-danger अकेला पूरा button है

⚠️ Watch out

Button traps

1. सिर्फ़ variant class: btn के बिना btn-primary coloured text देता है, button नहीं। हमेशा उन्हें pair कीजिए।

2. ग़लत colour word: यह btn-danger है, btn-red या btn-error नहीं।

3. Buttons में gaps जहाँ आपको toolbar चाहिए था: आप .btn-group wrapper भूल गए। और ध्यान रखिए एक btn-group उन्हें जोड़ता है; यह अकेले सिर्फ़ एक ही selectable नहीं बनाता (उस behaviour को radios या JavaScript चाहिए)।

📖 Theory

जो onclick आपने पहले मिला था वह अब भी यहाँ है

ये Unit 1 के उसी <button> के styled versions हैं, तो type और onclick जो आपने सीखा वे अब भी लागू होते हैं: <button type="button" class="btn btn-primary" onclick="register()">Register</button>। Unit 5 में वह onclick आपके JavaScript register() function को fire करेगा। Bootstrap सिर्फ़ button को कपड़े पहनाता है; behaviour अभी भी आपको wire करना है।

✅ Summary

Key takeaways

• एक Bootstrap button को दो classes चाहिए: btn (shape) + एक variant (colour), जैसे btn btn-primary।
• Solid variants (btn-success) colour से भरते हैं; outline variants (btn-outline-secondary) शांत होते हैं, secondary actions के लिए।
• Sizes: btn-lg, btn-sm। disabled attribute से disable कीजिए।
• Buttons को <div class="btn-group"> में wrap कीजिए ताकि वे एक toolbar में जुड़ें (जैसे एक filter)।
• हर view में एक strong solid button इस्तेमाल कीजिए ताकि primary action stand out करे।
• Memory hook: btn shape है, btn-* colour है।