Floating Action Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

import { FloatingActionButton } from "@/registry/ui/floating-action-button";
import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";

export default function FloatingActionButtonPreview() {
  return <FloatingActionButton icon={<IconPlusLine />} label="Example FAB" />;
}

Props

Prop	Type	Default
`asChild?`	`boolean`	`false`
`extended?`	`boolean`	`true`
`label?`	`ReactNode`	-
`icon?`	`ReactNode`	-

Examples

Extended

extended prop을 사용하여 label 표시 여부 및 레이아웃을 제어할 수 있습니다.

extended 사용 유무에 관계없이 label은 접근성을 위해 필수 prop으로 지정되어 있습니다.

import { FloatingActionButton } from "@/registry/ui/floating-action-button";
import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
import { HStack } from "@seed-design/react";

export default function FloatingActionButtonExtended() {
  return (
    <HStack gap="x2">
      <FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={true} />
      <FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={false} />
    </HStack>
  );
}

Float Composition

Floating Action Button은 <Float> 컴포넌트와 함께 사용하면 편리합니다.

import { FloatingActionButton } from "@/registry/ui/floating-action-button";
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { Box, Float } from "@seed-design/react";

export default function FloatingActionButtonFloatComposition() {
  return (
    <Box
      position="relative"
      width="300px"
      height="500px"
      borderWidth={1}
      borderColor="stroke.neutral"
    >
      <Float placement="bottom-end" offsetX="x4" offsetY="x4">
        <FloatingActionButton icon={<IconBellFill />} label="알림 설정" />
      </Float>
    </Box>
  );
}

Floating Action Button

Props

Examples

Extended

Float Composition

On this page