Components

Component

FloatingActionButton

Floating button for one primary screen-level action.

ReactReact Native5 props
PreviewReact

Imports

import { FloatingActionButton } from "@hozorica/hods-react/floating-action-button";
import { FloatingActionButton } from "@hozorica/hods-react-native/floating-action-button";

Props

PropTypeDescription
icon *ReactNodeLeading icon content.
label *ReactNodeVisible label in extended mode and accessible label in icon-only mode.
extendedbooleanControls whether the label is visible. Defaults to true.
asChildbooleanWeb-only child composition.
disabledbooleanDisables the action.

Platform Support

React

Button-compatible FAB with icon, required accessible label, extended layout, and asChild support.

React Native

Pressable FAB with icon, label, extended layout, and native accessibility state.

Usage

<Float placement="bottom-end"><FloatingActionButton icon={<Plus />} label="새 글 쓰기" /></Float>

Notes

  • Use with Float for fixed placement inside a positioned container.
  • Keep one FAB per screen-level workflow.