फ़ीचर्डनया
बटनGradient Glow Button
A call-to-action button with a gradient fill and a soft coloured glow on hover.
#gradient#glow#hover
6 फ्रेमवर्कशुरुआती
Loading…
A fully rounded button with a leading count badge for unread or pending totals.
<!--
The count is a real text node inside the button, not an aria-hidden
decoration, so the accessible name reads "12 Notifications" - which is the
information a badge is there to convey in the first place.
-->
<button class="pill-btn" type="button">
<span class="pill-btn__count">12</span>
Notifications
</button>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
countआवश्यक | number | - | बैज में दिखने वाली संख्या; 99 से ऊपर कुछ भी "99+" हो जाता है। |
childrenआवश्यक | ReactNode | - | कंपोनेंट के अंदर रेंडर होने वाला कंटेंट। |
disabled | boolean | false | इंटरैक्शन रोकता है और कंट्रोल को धुँधला कर देता है। |
onClick | () => void | - | जब यूज़र कंट्रोल को एक्टिवेट करता है तब फ़ायर होता है। |
The `rounded-full` radius is deliberately larger than any height the button can reach, which is what keeps the ends true semicircles at every size instead of a radius you have to re-guess. The count is a real text node, not an `aria-hidden` decoration, so the accessible name reads "12 Notifications" - which is the whole reason a badge is there. `tabular-nums` stops the width jittering as the number ticks.