फ़्लोटिंग बटन
Basic Floating Action Button
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
#fab#floating#icon
6 फ्रेमवर्कशुरुआती
Loading…
A compact 44px FAB - trimmed to the minimum comfortable touch target and no smaller.
<!--
A mini FAB is 44px, not smaller - that is the minimum comfortable touch target,
so "mini" trims the standard 56px to the floor and stops. The aria-label is
still the whole accessible name; the smaller glyph does not change that.
-->
<button type="button" aria-label="Add item" class="fixed bottom-6 right-6 z-40 inline-flex h-11 w-11 items-center justify-center rounded-full bg-blue-600 text-white shadow-[0_8px_20px_-6px_rgba(15,23,42,0.4)] transition hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-safe:hover:-translate-y-px disabled:pointer-events-none disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14" /></svg>
</button>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
ariaLabelआवश्यक | string | - | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
icon | ReactNode | - | कंटेंट के साथ रेंडर होने वाला आइकन एलिमेंट। |
onClick | () => void | - | जब यूज़र कंट्रोल को एक्टिवेट करता है तब फ़ायर होता है। |
disabled | boolean | false | इंटरैक्शन रोकता है और कंट्रोल को धुँधला कर देता है। |
A mini FAB is 44px, not smaller: that is the floor for a comfortable touch target, so "mini" trims the standard 56px to the minimum and stops. The `aria-label` remains the whole accessible name; the smaller glyph does not change that.