SEED Design

Floating Action Button

화면에 떠 있는 형태로 표시되는 주요 액션 버튼입니다. 페이지에서 가장 중요하고 자주 사용되는 액션을 강조할 때 사용됩니다.

import { FloatingActionButton } from "seed-design/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

Examples

Extended

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

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

import { FloatingActionButton } from "seed-design/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 "seed-design/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.neutralMuted"
    >
      <Float placement="bottom-end" offsetX="x4" offsetY="x4">
        <FloatingActionButton icon={<IconBellFill />} label="알림 설정" />
      </Float>
    </Box>
  );
}

Last updated on

On this page

Props
Examples
Extended
Float Composition