FloatingButton

A liquid glass button that floats over images, video, and content.

Base UI ButtonSource

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.
  • FloatingIconButton needs an aria-label.

API

Props that the library adds. Every part also takes all the Base UI props.

FloatingButton

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Height and text size: 32, 40, or 48 pixels.
iconReactNode–An icon next to the text.
iconPosition'start' | 'end''start'Puts the icon before or after the text.
loadingbooleanfalseShows a spinner and disables the button. It stays focusable.

FloatingIconButton

PropTypeDefaultDescription
iconReactNode–The icon. Required.
aria-labelstring–The accessible name. Required.
size'sm' | 'md' | 'lg''md'A 32, 40, or 48 pixel circle.

FloatingButtonGroup

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Sets the size of every button in the group.