FloatingActionButton

FloatingActionButton renders a fixed-position circular button anchored to the bottom-right corner of the viewport. It is the mobile-first pattern for exposing the single primary action on a screen — for example, "Create new item". The button accepts an icon and supports the same visual variants and size presets as IconButton.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onClick | () => void | Yes | — | Callback fired when the button is pressed. | | icon | string | No | — | Icon identifier displayed inside the button. | | iconPaths | any[] | No | — | SVG path data for a custom icon (alternative to icon). | | iconSize | number | No | — | Override the icon size in pixels. | | color | string | No | "primary" | Theme color key or any CSS hex/named color. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | borderRadius | number | No | 22 | Border radius in pixels. Default produces a circle. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | hasShadow | boolean | No | true | Whether to apply a drop shadow. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls the button's width, height, and icon size. | | zIndex | number | No | 999999 | CSS z-index of the fixed element. | | style | React.CSSProperties | No | — | Inline styles applied to the button. Use bottom and right to reposition it. |

Usage

Basic

import FloatingActionButton from '@/components/buttons/FloatingActionButton';

export default function Page() {
  return (
    <>
      {/* page content */}
      <FloatingActionButton
        icon="plus"
        onClick={() => console.log('create new')}
      />
    </>
  );
}

Custom position and color

import FloatingActionButton from '@/components/buttons/FloatingActionButton';

export default function Page() {
  return (
    <FloatingActionButton
      icon="plus"
      color="success"
      size="lg"
      style={{ bottom: 32, right: 32 }}
      onClick={() => console.log('create')}
    />
  );
}

Outline variant

import FloatingActionButton from '@/components/buttons/FloatingActionButton';

export default function Page() {
  return (
    <FloatingActionButton
      icon="edit"
      type="outline"
      color="primary"
      onClick={() => console.log('edit mode')}
    />
  );
}