FloatingActionButton

Open in Playground

The main action of a screen: a raised button (square like the rest of the library, or round with shape="circle") holding an icon (give it an aria-label), or an icon plus a label when extended. size is sm, md or lg; variant and tooltip work as on Button; color takes a variant name or any CSS color (#2563eb), with the text switching to black or white so it stays readable.

Pass position (for example bottom-right) to fix it to a corner of the viewport; without it the button sits where you put it.

Props

  • childrenReactNode

    The icon. An icon-only button needs an aria-label.

  • labelReactNode

    Text after the icon; makes the button extended.

  • size'sm' | 'md' | 'lg'
    Default: 'md'

    Button size (40 / 56 / 64 px for icon-only).

  • shape'square' | 'circle'
    Default: 'square'

    Square corners, or a round button (a pill when extended).

  • variant'default' | 'secondary' | 'flat' | 'success' | 'danger' | 'warning'
    Default: 'default'

    Visual style (same as Button).

  • position'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center'

    Fix the button to a corner of the viewport.

  • color'default' | 'secondary' | 'flat' | 'success' | 'danger' | 'warning' | string

    A variant name, or any CSS color (#e11d48, royalblue); overrides variant. Text switches to black or white for contrast.

  • tooltipstring

    Shows a styled Tooltip (same as Button).

  • styleCSSProperties

    Inline styles, merged over those color sets.

  • classNamestring
    Default: ''

    Extra classes for the root element.

  • ...rest

    Any other props are passed to the underlying element.