悬浮按钮
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.