Snackbar

Snackbar는 사용자 액션의 결과나 프로세스의 결과를 알려주는 일시적인 알림 요소입니다. 화면 하단에 표시되며 자동으로 사라집니다.

import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 5000,
          onClose: () => {},
          render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarPreview() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Installation

npx @seed-design/cli@latest add snackbar

pnpm dlx @seed-design/cli@latest add snackbar

yarn dlx @seed-design/cli@latest add snackbar

bun x @seed-design/cli@latest add snackbar

Props

Snackbar

Prop	Type	Default
`asChild?`	`boolean`	`false`
`variant?`	`"default" \| "positive" \| "critical"`	`default`
`shouldCloseOnAction?`	`boolean`	`true`
`onAction?`	`(() => void)`	-
`actionLabel?`	`string`	-
`message?`	`string`	-

SnackbarAdapter.create

Prop	Type	Default
`render?`	`() => ReactNode`	-
`onClose?`	`(() => void)`	-
`removeDelay?`	`number`	`200`
`timeout?`	`number`	`5000`

Examples

Positive

import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 5000,
          onClose: () => {},
          render: () => (
            <Snackbar
              variant="positive"
              message="알림 메세지"
              actionLabel="확인"
              onAction={() => {}}
            />
          ),
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarPositive() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Critical

import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 50000000,
          onClose: () => {},
          render: () => (
            <Snackbar
              variant="critical"
              message="알림 메세지"
              actionLabel="확인"
              onAction={() => {}}
            />
          ),
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarNegative() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Avoid Overlap

<SnackbarAvoidOverlap /> 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다. <SnackbarAvoidOverlap />의 자식 컴포넌트는 forwardRef(~React 18) 혹은 ref prop(React 19~)으로 ref를 전달받아야 합니다. offset은 다음 상황에서 갱신됩니다.

SnackbarAvoidOverlap의 자식 컴포넌트가 mount될 때
SnackbarAvoidOverlap의 자식 컴포넌트가 unmount될 때
SnackbarAvoidOverlap의 자식 컴포넌트의 높이가 변경될 때
SnackbarRegion의 높이가 변경될 때

Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.

import { Flex, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  Snackbar,
  SnackbarAvoidOverlap,
  SnackbarProvider,
  useSnackbarAdapter,
} from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <VStack gap="x4">
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
          })
        }
      >
        실행
      </ActionButton>
      <SnackbarAvoidOverlap>
        <Flex width="full" height="x16" bg="bg.criticalWeak" justify="center" align="center">
          Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.
        </Flex>
      </SnackbarAvoidOverlap>
    </VStack>
  );
}

export default function SnackbarPreview() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Snackbar

Manual Installation

On this page