Actions
Float Button
A floating action button pinned to a corner of the screen. FloatButtonGroup stacks several buttons as a speed dial that the trigger opens and Escape closes, with full keyboard support.
ReactVueWeb Components
View in Storybook Playground
Examples
<FloatButton position="bottom-right" aria-label="ページ先頭へ戻る">↑</FloatButton>Props
| Name | Type | Default | Description |
|---|---|---|---|
position | FloatButtonPosition | bottom-right | Corner of the viewport to anchor to. @default 'bottom-right' |
status | FloatButtonStatus | primary | Semantic color. @default 'primary' |
size | FloatButtonSize | md | Control size. @default 'md' |
shape | FloatButtonShape | circle | Button shape. @default 'circle' |
children | ReactNode | — | Icon or label content. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.