组件 · 操作
FloatButton
Deprecated. A button that floats over the page content; actions belong in the page's header or toolbar instead.
import { FloatButton } from "@botiverse/raft-ui";FloatButton and FloatButtonGroup are deprecated and are removed in raft-ui 1.0. They are not part of the Raft Design System: in Raft, controls sit flat in the layout, and only menus, popups, dialogs and toasts float above the page (Elevation). Put the action in the page's header or toolbar instead: on desktop and on a phone's pushed page, that is PanelActions in the panel header (Panel).
The one kind of control that floats over content is the jump pill of a conversation, which takes the person somewhere in the message list instead of doing an action, and it is a Button without a shadow, not a FloatButton (Elevation).
When to use
| Situation | Use |
|---|---|
| An action for the whole page or panel | A PanelAction in the panel header (Panel) |
| An action in a toolbar, such as New Task over a list of tasks | The toolbar's own button (Tasks) |
| Any other action | Button, in the layout |
| Back to Bottom, new messages, the next unread thread | The jump controls of MessageList |
API
FloatButton
| Prop | 类型 | 默认值 |
|---|---|---|
| ReactNode | ||
| ReactNode | ||
| FloatButtonOffset | ||
| FloatButtonPosition | ||
| FloatButtonShape | ||
| FloatButtonSide | ||
| FloatButtonSize | ||
| ReactNode | ||
| FloatButtonVariant | "default" | |
| Whether the button should be focusable when disabled. | boolean | false |
| Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). | boolean | true |
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) |
Also takes the attributes of its element.
FloatButtonGroup
| Prop | 类型 | 默认值 |
|---|---|---|
| boolean | false | |
| FloatButtonGroupDirection | "vertical" | |
| string | number | ||
| FloatButtonOffset | ||
| FloatButtonPosition | ||
| FloatButtonShape | "circle" | |
| FloatButtonSide | ||
| FloatButtonSize | ||
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) |
Also takes the attributes of its element.
相关组件
改动
- 0.7.0 · ChangedDeprecated, to be removed in 1.0:
FloatButton/FloatButtonGroup(not part of the design system),LegacyTaskPanel*(unused), andLiveAgentActivityBar*(the design system shows working agents where they appear).