फ़्लोटिंग बटन
Extended Floating Action Button
A pill-shaped FAB carrying its icon and a visible label, for when the action needs saying out loud.
#fab#extended#pill
6 फ्रेमवर्कशुरुआती
Loading…
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
<!--
aria-label is the whole component's accessibility budget: the SVG is
aria-hidden, so without the label a screen reader announces "button" and
nothing else. It is not optional decoration.
-->
<button class="fab" type="button" aria-label="New message">
<svg class="fab__icon" 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 | इंटरैक्शन रोकता है और कंट्रोल को धुँधला कर देता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
An icon is not a name. The SVG here is `aria-hidden`, so strip the `aria-label` and a screen reader announces "button" and stops - the user is told something is clickable and nothing about what it does. That label is the component, the circle is decoration. The other detail worth keeping is the focus ring: a blue ring drawn straight onto a blue button is invisible, so the CSS stacks two shadows - an inner ring in the *page* colour, then the ring itself - and the Tailwind tab does the same with `ring-offset-2 ring-offset-white dark:ring-offset-gray-950`. Change the FAB's background and you must change that offset to match whatever it now sits on, or the ring disappears again. The hover lift is behind `motion-safe:`; the colour change is not, because that is feedback rather than motion. One FAB per screen - a second one means neither is *the* action.