FloatingButton
A liquid glass button that floats over images, video, and content.
Over content
Use this only over images, video, or a canvas. The content behind the glass shows through. FloatingButtonGroup puts several buttons in one glass pill.
Sizes and states
Use md by default and sm in dense UI, such as a zoom group. The demo also shows an icon button and the disabled and loading states.
sm · dense
md · default
lg
Icon
Disabled
Loading
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- On a normal surface, use Button.
FloatingIconButtonneeds anaria-label.
API
Props that the library adds. Every part also takes all the Base UI props.
FloatingButton
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Height and text size: 32, 40, or 48 pixels. |
| icon | ReactNode | – | An icon next to the text. |
| iconPosition | 'start' | 'end' | 'start' | Puts the icon before or after the text. |
| loading | boolean | false | Shows a spinner and disables the button. It stays focusable. |
FloatingIconButton
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | – | The icon. Required. |
| aria-label | string | – | The accessible name. Required. |
| size | 'sm' | 'md' | 'lg' | 'md' | A 32, 40, or 48 pixel circle. |
FloatingButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Sets the size of every button in the group. |