Contextual Floating Button

화면 위에 떠 있으며 특정 상황에서만 나타나는 보조적인 동작을 위한 버튼입니다.

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @seed-design/lynx-react @seed-design/lynx-css

Lynx ContextualFloatingButton은 별도 ui:contextual-floating-button snippet 없이 @seed-design/lynx-react 패키지에서 직접 제공합니다.

Usage

Lynx 예제를 불러오는 중입니다.

import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";

import { ContextualFloatingButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ContextualFloatingButton>
      <PrefixIcon icon={<IconBellFill />} />
      알림 설정
    </ContextualFloatingButton>
  );
}

Props

Prop

Type

Examples

Float Composition

Lynx에는 Float 컴포넌트가 없으므로 기준 frame의 position="relative"와 외부 Box의 native absolute bottom-center 배치로 같은 결과를 만듭니다.

Lynx 예제를 불러오는 중입니다.

import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";

import { Box, ContextualFloatingButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <Box
      position="relative"
      display="flex"
      flexDirection="column"
      width="full"
      flexGrow
      minHeight="0"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Box position="absolute" width="full" bottom="x4" display="flex" justifyContent="center">
        <ContextualFloatingButton>
          <PrefixIcon icon={<IconBellFill />} />
          알림 설정
        </ContextualFloatingButton>
      </Box>
    </Box>
  );
}

Solid Variant

Lynx 예제를 불러오는 중입니다.

import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine";

import { ContextualFloatingButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ContextualFloatingButton variant="solid">
      <PrefixIcon icon={<IconPlusLine />} />
      Solid Variant
    </ContextualFloatingButton>
  );
}

Layer Variant

Lynx 예제를 불러오는 중입니다.

import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine";

import { ContextualFloatingButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ContextualFloatingButton variant="layer">
      <PrefixIcon icon={<IconPlusLine />} />
      Layer Variant
    </ContextualFloatingButton>
  );
}

Icon Only

layout="iconOnly"에는 스크린 리더가 읽을 accessibility-label을 함께 지정하세요.

Lynx 예제를 불러오는 중입니다.

import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";

import { ContextualFloatingButton, Icon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ContextualFloatingButton layout="iconOnly" accessibility-label="추가">
      <Icon icon={<IconPlusFill />} />
    </ContextualFloatingButton>
  );
}

Loading

탭하면 loading 상태가 즉시 시작되고 2초 뒤에 원래 상태로 돌아옵니다. Loading 중에는 탭할 수 없습니다.

Lynx 예제를 불러오는 중입니다.

import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine";
import { useState } from "@lynx-js/react";

import { ContextualFloatingButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  const [loading, setLoading] = useState(false);

  function handleTap() {
    "background only";
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  }

  return (
    <ContextualFloatingButton loading={loading} bindtap={handleTap}>
      <PrefixIcon icon={<IconPlusLine />} />
      시간이 걸리는 액션
    </ContextualFloatingButton>
  );
}

웹 버전과의 차이

onClick 대신 bindtap 또는 main-thread:bindtap을 사용합니다.
aria-label 대신 accessibility-label을 사용합니다. disabled 또는 loading 상태는 비활성 버튼으로 알립니다.
웹 SVG 대신 Lynx icon을 PrefixIcon 또는 Icon slot에 전달합니다.
Lynx에서는 loading 중 tap을 차단합니다.
버튼 자체의 transform을 덮어쓰지 마세요. 위치 조정이 필요하면 바깥 wrapper에 적용하세요.

Contextual Floating Button

목차