FloatingButton

Action

화면 위에 고정해 가장 중요한 생성·추가 행동을 제공하는 플로팅 버튼.

Usage

화면에 떠 있는 주요 액션(FAB). 스크롤과 무관하게 항상 노출

import

import { FloatingButton } from '@mildang/design-system/FloatingButton';

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

FloatingButton Props

Prop

Type

Default

asChild

boolean

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

color

"impact" | "primary" | "secondary" | "tertiary"

primary

disabled

boolean

false

endIcon

ReactNode

지정 안 함

icon

ReactNode

지정 안 함

label

ReactNode

지정 안 함

boolean

false

size

"md" | "sm"

SystemStyleObject | (SystemStyleObject[] & SystemStyleObject)

지정 안 함

아이콘·라벨 배치

icon·label prop 유무 조합으로 형태가 정해진다.

배치	설명
Icon Only	`icon` 만 지정하는 기본형 — 라벨 없이 아이콘만으로 기능을 전달한다.
Extended FAB	`icon` + `label` — 아이콘이 라벨 왼쪽에 온다. 필요하면 `endIcon` 으로 라벨 오른쪽에 보조 아이콘(예: chevron-right)을 추가로 둘 수 있다.
Text Only	`label` 만 지정 — 특수한 상황에서만 사용을 권장한다.

레이아웃

아이콘 전용·아이콘+라벨+endIcon·라벨 전용 세 형태를 비교합니다. label 유무가 형태를 결정합니다.

코드

Open in Playground

import Add from '@mildang/icons/react/add';
import ChevronRight from '@mildang/icons/react/chevron-right';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import { HStack } from '@mildang/styled-system/jsx';

export default function FloatingButtonLayoutsExample() {
  return (
    <HStack gap="6" alignItems="center" flexWrap="wrap">
      <FloatingButton color="primary" icon={<Add />} aria-label="새로 만들기" />
      <FloatingButton color="primary" icon={<Add />} label="새로 만들기" endIcon={<ChevronRight />} />
      <FloatingButton color="primary" label="새로 만들기" size="sm" />
    </HStack>
  );
}

예제

기본 사용

아이콘만 담은 기본형 FAB — 화면당 하나, 화면에 항상 떠 있는 최우선 행동에 씁니다.

코드

Open in Playground

import Add from '@mildang/icons/react/add';
import { FloatingButton } from '@mildang/design-system/FloatingButton';

export default function FloatingButtonBasicExample() {
  return <FloatingButton color="primary" icon={<Add />} aria-label="새로 만들기" />;
}

색상

네 단계 위계를 나란히 비교합니다. impact 는 캠페인·핵심 전환처럼 화면당 하나만 씁니다.

코드

Open in Playground

import Add from '@mildang/icons/react/add';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import { HStack } from '@mildang/styled-system/jsx';

const colors = ['impact', 'primary', 'secondary', 'tertiary'] as const;

export default function FloatingButtonColorsExample() {
  return (
    <HStack gap="6" flexWrap="wrap">
      {colors.map((color) => (
        <FloatingButton key={color} color={color} icon={<Add />} aria-label={`${color} 새로 만들기`} />
      ))}
    </HStack>
  );
}

Sizes

md·sm 두 크기를 비교합니다. sm 은 좁은 화면이나 보조 FAB 처럼 존재감을 낮출 때 씁니다.

코드

Open in Playground

import Add from '@mildang/icons/react/add';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import { HStack } from '@mildang/styled-system/jsx';

const sizes = ['md', 'sm'] as const;

export default function FloatingButtonSizesExample() {
  return (
    <HStack gap="6" alignItems="center">
      {sizes.map((size) => (
        <FloatingButton
          key={size}
          color="primary"
          size={size}
          icon={<Add />}
          aria-label={`${size} 새로 만들기`}
        />
      ))}
    </HStack>
  );
}

상태

기본·비활성·로딩을 나란히 둡니다. 처리 중에는 loading 으로 중복 클릭을 막습니다.

코드

Open in Playground

import Add from '@mildang/icons/react/add';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import { HStack } from '@mildang/styled-system/jsx';

export default function FloatingButtonStatesExample() {
  return (
    <HStack gap="6" flexWrap="wrap">
      <FloatingButton color="primary" icon={<Add />} label="새로 만들기" />
      <FloatingButton color="primary" icon={<Add />} label="새로 만들기" disabled />
      <FloatingButton color="primary" icon={<Add />} label="저장 중" loading />
    </HStack>
  );
}

Badge 조합

알림 건수를 우상단에 겹쳐 보여줍니다. 원형 host 이므로 overlap="circular" 로 정렬합니다.

코드

Open in Playground

import Bell from '@mildang/icons/react/bell';
import { Badge } from '@mildang/design-system/Badge';
import { FloatingButton } from '@mildang/design-system/FloatingButton';

export default function FloatingButtonWithBadgeExample() {
  return (
    <Badge variant="number" size="sm" overlap="circular" count={12}>
      <FloatingButton color="primary" icon={<Bell />} aria-label="알림 12건" />
    </Badge>
  );
}

StatesPrimary

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import Add from '@mildang/icons/react/add';
import ChevronRight from '@mildang/icons/react/chevron-right';
import { css } from '@mildang/styled-system/css';

const statesGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, minmax(0, 80px))',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

// icon + label + endIcon 은 폭이 크므로 auto 컬럼으로 표시.
const iconLeftGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, auto)',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

function StatesRow({ color }: { color: 'impact' | 'primary' | 'secondary' | 'tertiary' }) {
  return (
    <div>
      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px' }}>
        Icon Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-hover`} color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-pressed`} color={color} icon={<Add />} />
        <FloatingButton color={color} disabled icon={<Add />} />
        <FloatingButton color={color} loading icon={<Add />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Icon + Label + EndIcon
      </Text>
      <div className={iconLeftGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton
          id={`${color}-il-hover`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton
          id={`${color}-il-pressed`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton color={color} disabled icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton color={color} loading icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Text Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-hover`} color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-pressed`} color={color} label="버튼" size="sm" />
        <FloatingButton color={color} disabled label="버튼" size="sm" />
        <FloatingButton color={color} loading label="버튼" size="sm" />
      </div>
    </div>
  );
}

const FloatingButtonStatesPrimaryExample = () => <StatesRow color="primary" />;

export default FloatingButtonStatesPrimaryExample;

StatesTertiary

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import Add from '@mildang/icons/react/add';
import ChevronRight from '@mildang/icons/react/chevron-right';
import { css } from '@mildang/styled-system/css';

const statesGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, minmax(0, 80px))',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

// icon + label + endIcon 은 폭이 크므로 auto 컬럼으로 표시.
const iconLeftGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, auto)',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

function StatesRow({ color }: { color: 'impact' | 'primary' | 'secondary' | 'tertiary' }) {
  return (
    <div>
      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px' }}>
        Icon Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-hover`} color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-pressed`} color={color} icon={<Add />} />
        <FloatingButton color={color} disabled icon={<Add />} />
        <FloatingButton color={color} loading icon={<Add />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Icon + Label + EndIcon
      </Text>
      <div className={iconLeftGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton
          id={`${color}-il-hover`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton
          id={`${color}-il-pressed`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton color={color} disabled icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton color={color} loading icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Text Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-hover`} color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-pressed`} color={color} label="버튼" size="sm" />
        <FloatingButton color={color} disabled label="버튼" size="sm" />
        <FloatingButton color={color} loading label="버튼" size="sm" />
      </div>
    </div>
  );
}

const FloatingButtonStatesTertiaryExample = () => <StatesRow color="tertiary" />;

export default FloatingButtonStatesTertiaryExample;

StatesSecondary

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import Add from '@mildang/icons/react/add';
import ChevronRight from '@mildang/icons/react/chevron-right';
import { css } from '@mildang/styled-system/css';

const statesGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, minmax(0, 80px))',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

// icon + label + endIcon 은 폭이 크므로 auto 컬럼으로 표시.
const iconLeftGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, auto)',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

function StatesRow({ color }: { color: 'impact' | 'primary' | 'secondary' | 'tertiary' }) {
  return (
    <div>
      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px' }}>
        Icon Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-hover`} color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-pressed`} color={color} icon={<Add />} />
        <FloatingButton color={color} disabled icon={<Add />} />
        <FloatingButton color={color} loading icon={<Add />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Icon + Label + EndIcon
      </Text>
      <div className={iconLeftGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton
          id={`${color}-il-hover`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton
          id={`${color}-il-pressed`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton color={color} disabled icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton color={color} loading icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Text Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-hover`} color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-pressed`} color={color} label="버튼" size="sm" />
        <FloatingButton color={color} disabled label="버튼" size="sm" />
        <FloatingButton color={color} loading label="버튼" size="sm" />
      </div>
    </div>
  );
}

const FloatingButtonStatesSecondaryExample = () => <StatesRow color="secondary" />;

export default FloatingButtonStatesSecondaryExample;

StatesImpact

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import Add from '@mildang/icons/react/add';
import ChevronRight from '@mildang/icons/react/chevron-right';
import { css } from '@mildang/styled-system/css';

const statesGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, minmax(0, 80px))',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

// icon + label + endIcon 은 폭이 크므로 auto 컬럼으로 표시.
const iconLeftGrid = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(5, auto)',
  justifyContent: 'start',
  alignItems: 'center',
  rowGap: '10px',
  columnGap: '24px',
});

function StatesRow({ color }: { color: 'impact' | 'primary' | 'secondary' | 'tertiary' }) {
  return (
    <div>
      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px' }}>
        Icon Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-hover`} color={color} icon={<Add />} />
        <FloatingButton id={`${color}-i-pressed`} color={color} icon={<Add />} />
        <FloatingButton color={color} disabled icon={<Add />} />
        <FloatingButton color={color} loading icon={<Add />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Icon + Label + EndIcon
      </Text>
      <div className={iconLeftGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton
          id={`${color}-il-hover`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton
          id={`${color}-il-pressed`}
          color={color}
          icon={<Add />}
          label="버튼"
          endIcon={<ChevronRight />}
        />
        <FloatingButton color={color} disabled icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
        <FloatingButton color={color} loading icon={<Add />} label="버튼" endIcon={<ChevronRight />} />
      </div>

      <Text variant="body-lg" color="neutral.text.low" style={{ marginBottom: '8px', marginTop: '24px' }}>
        Text Only
      </Text>
      <div className={statesGrid}>
        <Text variant="body-lg" color="neutral.text.lowest">
          Inactive
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Hover
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Pressed
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Disabled
        </Text>
        <Text variant="body-lg" color="neutral.text.lowest">
          Loading
        </Text>

        <FloatingButton color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-hover`} color={color} label="버튼" size="sm" />
        <FloatingButton id={`${color}-t-pressed`} color={color} label="버튼" size="sm" />
        <FloatingButton color={color} disabled label="버튼" size="sm" />
        <FloatingButton color={color} loading label="버튼" size="sm" />
      </div>
    </div>
  );
}

const FloatingButtonStatesImpactExample = () => <StatesRow color="impact" />;

export default FloatingButtonStatesImpactExample;

Default

코드

Open in Playground

import type { ComponentProps } from 'react';

import { FloatingButton } from '@mildang/design-system/FloatingButton';
import Add from '@mildang/icons/react/add';
import { css } from '@mildang/styled-system/css';

const previewArea = css({ display: 'flex', gap: '12px', alignItems: 'center' });

const STORY_DEFAULT_ARGS = { ...({}), ...({
    color: 'tertiary',
    size: 'md',
    disabled: false,
  }) } as ComponentProps<typeof FloatingButton>;

const FloatingButtonDefaultExampleRender = (args: ComponentProps<typeof FloatingButton>) => {
    return (
      <div className={previewArea}>
        <FloatingButton {...args} icon={<Add />} />
        <FloatingButton {...args} icon={<Add />} label="버튼" />
        {/* textonly */}
        <FloatingButton {...args} label="Text Only" />
      </div>
    );
  };

export default function FloatingButtonDefaultExample(props: Partial<ComponentProps<typeof FloatingButton>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof FloatingButton>;
  return FloatingButtonDefaultExampleRender(mergedProps);
}

Examples

코드

Open in Playground

import { css } from '@mildang/styled-system/css';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import { Badge } from '@mildang/design-system/Badge';
import Add from '@mildang/icons/react/add';

export function FloatingButtonExampleGrid() {
  return (
    <div
      className={css({
        display: 'grid',
        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
        gap: '16px',
        alignItems: 'start',
      })}
    >
      <div className={css({ display: 'grid', gap: '8px' })}>
        <h4 className={css({ m: 0 })}>Default</h4>
        <p className={css({ m: 0 })}>
          아이콘 전용 기본형 FAB. 화면당 1개만 사용. 하단 우측 고정, 제품 Safe Area 규칙을 준수하고 바텀 UI와
          간섭 금지. 필요 시 스크롤 규칙(내릴 때 숨김 / 올릴 때 노출)을 적용.
        </p>
        <div
          className={css({
            border: '1px solid token(colors.neutral.border.low)',
            rounded: '12px',
            minHeight: '160px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          })}
        >
          <FloatingButton color="primary" icon={<Add />} />
        </div>
      </div>

      <div className={css({ display: 'grid', gap: '8px' })}>
        <h4 className={css({ m: 0 })}>FAB + Badge</h4>
        <p className={css({ m: 0 })}>
          FAB에 상태/카운트를 함께 보여주는 변형(신규/미처리 건수 등). Badge를 우상단에 겹쳐 배치, 숫자는
          1–3자리 표기(예: 99+). 값이 0이면 표시하지 않습니다.
        </p>
        <div
          className={css({
            border: '1px solid token(colors.neutral.border.low)',
            rounded: '12px',
            minHeight: '160px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
          })}
        >
          {/* FAB는 원형 host → overlap="circular"로 원 45° 가장자리에 정렬 */}
          <Badge variant="number" size="sm" overlap="circular" count={100} max={99}>
            <FloatingButton color="primary" icon={<Add />} />
          </Badge>
        </div>
      </div>
    </div>
  );
}

const FloatingButtonExamplesExample = () => <FloatingButtonExampleGrid />;

export default FloatingButtonExamplesExample;