React
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" />;
}Installation
npx @seed-design/cli@latest add ui:floating-action-buttonpnpm dlx @seed-design/cli@latest add ui:floating-action-buttonyarn dlx @seed-design/cli@latest add ui:floating-action-buttonbun x @seed-design/cli@latest add ui:floating-action-button의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:floating-action-button
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { FloatingActionButton as SeedFloatingActionButton } from "@seed-design/react";
import * as React from "react";
export interface FloatingActionButtonProps
extends Omit<SeedFloatingActionButton.RootProps, "children"> {
icon: React.ReactNode;
label: React.ReactNode;
}
/**
* @see https://seed-design.io/react/components/floating-action-button
*/
export const FloatingActionButton = React.forwardRef<
React.ElementRef<typeof SeedFloatingActionButton.Root>,
FloatingActionButtonProps
>(({ icon, label, ...otherProps }, ref) => {
return (
<SeedFloatingActionButton.Root ref={ref} {...otherProps}>
<SeedFloatingActionButton.Icon svg={icon} />
<SeedFloatingActionButton.Label>{label}</SeedFloatingActionButton.Label>
</SeedFloatingActionButton.Root>
);
});
FloatingActionButton.displayName = "FloatingActionButton";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
Props
Prop
Type
iconReact.ReactNodelabelReact.ReactNodeExamples
Extended
extended prop을 사용하여 label 표시 여부 및 레이아웃을 제어할 수 있습니다.
extended 사용 유무에 관계없이 label은 접근성을 위해 필수 prop으로 지정되어 있습니다.
import { FloatingActionButton } from "seed-design/ui/floating-action-button";
import { Switch } from "seed-design/ui/switch";
import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
import { Flex, VStack } from "@seed-design/react";
import { useState } from "react";
export default function FloatingActionButtonExtended() {
const [extended, setExtended] = useState(true);
return (
<VStack align="center" justify="space-between">
<Flex height="100px" align="center" justify="center">
<FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={extended} />
</Flex>
<Switch
size="16"
tone="neutral"
label="Extended"
checked={extended}
onCheckedChange={setExtended}
/>
</VStack>
);
}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