উপাদান · Components
বাটন
ফোলা বালিশের মতো বাটন। ওপরে আলো, নিচে একটা ধাপ। চাপলে বাটন সত্যিই নিচে বসে যায়, তাই ফোন স্ক্রিনেও বোঝা যায় চাপ পড়েছে। চেপে দেখুন।
ধরন
One primary per screen. Color variants carry meaning from the palette, not decoration.
মাপ
Medium is the default. Large for the one big action on a phone screen; small inside tables and toolbars.
শুধু আইকন
Always give icon buttons a tooltip and an aria-label.
অবস্থা
Loading keeps the button's size so the layout doesn't jump. Disabled buttons fade and lose their ledge.
গঠন
- Face
- Vertical gradient, 1 step lighter at the top
- Highlight
- inset 0 2px 0 white at 35%
- Ledge
- 3 / 4 / 5px solid, one shade darker (sm / md / lg)
- Glow
- 0 12px 20px -10px of the face color
- Press
- translateY by the ledge height; ledge goes to 0
- Height
- 36 / 48 / 56px. Every size clears 44px tap targets except sm, which is for desktop tables
- Focus
- 3px sunshine outline, 3px offset
নিয়ম
করুন
- Name the button after the action: “হাজিরা সংরক্ষণ”
- Use the same verb in the toast: “হাজিরা সংরক্ষিত হয়েছে”
- Put the safe choice first in dialogs
করবেন না
- Use two primary buttons side by side
- Write “সাবমিট” or “ঠিক আছে” when a real verb fits
- Use danger color for anything that can be undone